jsm-mall-front/src/views/workOrder/qualityFeedback/index.vue

<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :exportList="exportList"
    :columnParsing="columnParsing"
    :optionsEvensGroup="optionsEvensGroup"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
    :operation="operation()"
  >
    <div class="cartographer_big">
      <el-dialog title="配置" width="100%" :modal="false" :visible.sync="formBool" :before-close="handleClose">
        <zj-page-container v-if="formBool">
          <zj-page-fill class="neibuview">
            <zj-form-container
              ref="formRef"
              :form-data="formData"
              :form-rules="formRules"
              :form-attributes="{ size: 'mini' }"
            >
              <zj-form-module title="申请信息" label-width="140px" :form-data="formData" :form-items="items" />
              <zj-form-module
                v-if="~[2].indexOf(formType) || (~[3].indexOf(formType) && formData.confirmBy)"
                title="中心审批信息"
                label-width="140px"
                :form-data="formData"
                :form-items="items2"
              />
            </zj-form-container>
          </zj-page-fill>
          <!-- 操作按钮 -->
          <div style="box-sizing: border-box; padding: 10px; text-align: right">
            <el-button size="mini" @click="handleClose">取 消</el-button>
            <el-button
              v-if="~[0, 1].indexOf(formType) && !formData.id"
              size="mini"
              @click="formConfirm('SAVE')"
              type="primary"
              >保 存</el-button
            >
            <el-button v-if="~[0, 1].indexOf(formType)" size="mini" @click="formConfirm('WAIT')" type="primary"
              >提 交</el-button
            >
            <el-button v-if="~[2].indexOf(formType)" size="mini" @click="formConfirmShenHe" type="primary"
              >确定</el-button
            >
          </div>
        </zj-page-container>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired } from '@/components/template/rules_verify.js'
import {
  qualityFeedbackList,
  qualityFeedbackListExport,
  qualityFeedbackDetail,
  qualityFeedbackAdd,
  qualityFeedbackUpdate,
  qualityFeedbackConfirm,
  qualityFeedbackCount,
  qualityFeedbackUpdateUpload
} from '@/api/qualityFeedback'
import { lbsAmapRegion } from '@/api/common.js'
import { getClassifyList } from '@/api/goods'
import { getWebsit } from '@/api/customerManagement.js'
export default {
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      formBool: false,
      formType: 0,
      formData: {
        address: '',
        area: '',
        areaId: '',
        bugPartCode: '',
        bugPartName: '',
        bugRemark: '',
        city: '',
        cityId: '',
        companyWechatId: '',
        companyWechatName: '',
        confirmBy: '',
        confirmTime: '',
        createBy: '',
        createTime: '',
        customerMobile: '',
        customerName: '',
        insideCode: '',
        isNeedPlan: true,
        isPartSend: true,
        isSalesBefore: true,
        isUpload: true,
        items: [],
        mainId: '',
        mainName: '',
        num: '',
        orderNo: '',
        outCode: '',
        outDate: '',
        productName: '',
        province: '',
        provinceId: '',
        remark: '',
        repairDate: '',
        seriesName: '',
        smallId: '',
        smallName: '',
        status: '',
        street: '',
        streetId: '',
        submitBy: '',
        submitTime: '',
        supplyDate: '',
        title: '',
        useDate: '',
        websitAnalyse: '',
        websitHandleMethod: '',
        websitId: '',
        websitName: '',
        workerMobie: '',
        workerName: '',
        fujian: [],
        neijitiaoma: [],
        waijitiaoma: [],
        qita: []
      },
      formRules: {},
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      classifyList: [],
      classifyListLv2: [],
      createWebsitList: []
    }
  },
  computed: {
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.getinitlbslist()
                this.getClassifyListData()
                this.formType = 0
                this.formBool = true
              }
            })
          ]
        ],
        [
          [
            this.optionsEvensAuth('recordedAtHeadquarters', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选数据')
                  return
                }
                qualityFeedbackUpdateUpload({
                  ids: this.recordSelected.map(item => item.id).join(',')
                }).then(res => {
                  this.$message({
                    type: 'success',
                    message: '操作成功！'
                  })
                  this.$refs?.pageRef?.refreshList()
                })
              }
            })
          ]
        ]
      ]
    },
    items() {
      return [
        {
          name: 'el-input',
          md: 18,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '反馈主题',
            prop: 'title',
            rules: [...required]
          }
        },
        {
          md: 6,
          name: 'el-radio',
          options: [
            { label: '是', value: true },
            { label: '否', value: false }
          ],
          attributes: {
            disabled: [2, 3].includes(this.formType)
          },
          formItemAttributes: {
            label: '是否售前机',
            prop: 'isSalesBefore'
          }
        },
        {
          name: 'el-select',
          md: 12,
          options: this.createWebsitList.map(item => ({ ...item, label: `(${item.value})${item.label}` })),
          attributes: {
            disabled: [1, 2, 3].includes(this.formType),
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '反馈网点',
            prop: 'websitId',
            rules: [...required]
          },
          events: {
            change: val => {
              this.formData.websitName = this.createWebsitList.find(item => item.value == val).label || ''
            }
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '反馈时间',
            prop: 'submitTime'
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '云售后4.0单号',
            prop: 'orderNo',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '工程师名称',
            prop: 'workerName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '工程师电话',
            prop: 'workerMobie',
            rules: [...mobileRequired]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '客户名称',
            prop: 'customerName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '客户电话',
            prop: 'customerMobile',
            rules: [...mobileRequired]
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '省',
            prop: 'provinceId',
            rules: [...required]
          },
          options: this.provinceList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: [2, 3].includes(this.formType),
            clearable: true,
            filterable: true,
            placeholder: '请选择'
          },
          events: {
            change: val => {
              // 获取省名称
              this.formData.province =
                this.provinceList.map((v, i) => ({ value: v.id, label: v.name })).find(item => item.value === val)
                  ?.label || ''
              // 清除市区街道以及详细地址数据
              this.delDataK(1)
              lbsAmapRegion({ pid: val }).then(res => {
                this.cityList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '市',
            prop: 'cityId',
            rules: [...required]
          },
          options: this.cityList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: [2, 3].includes(this.formType),
            clearable: true,
            filterable: true,
            placeholder: '请选择'
          },
          events: {
            change: val => {
              // 获取市名称
              this.formData.city =
                this.cityList.map((v, i) => ({ value: v.id, label: v.name })).find(item => item.value === val)?.label ||
                ''
              // 清除区街道以及详细地址数据
              this.delDataK(2)
              lbsAmapRegion({ pid: val }).then(res => {
                this.areaList = res.data
              })
            }
          }
        },

        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '区',
            prop: 'areaId',
            rules: [...required]
          },
          options: this.areaList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: [2, 3].includes(this.formType),
            clearable: true,
            filterable: true,
            placeholder: '请选择'
          },
          events: {
            change: val => {
              // 获取区名称
              this.formData.area =
                this.areaList.map((v, i) => ({ value: v.id, label: v.name })).find(item => item.value === val)?.label ||
                ''
              // 清除街道以及详细地址数据
              this.delDataK(3)
              lbsAmapRegion({ pid: val }).then(res => {
                this.streetList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '街道', //
            prop: 'streetId',
            rules: [...required]
          },
          options: this.streetList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: [2, 3].includes(this.formType),
            clearable: true,
            filterable: true,
            placeholder: '请选择'
          },
          events: {
            change: val => {
              // 获取街道名称
              this.formData.street =
                this.streetList.map((v, i) => ({ value: v.id, label: v.name })).find(item => item.value === val)
                  ?.label || ''
              // 清除详细地址数据
              this.delDataK(4)
            }
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '详细地址',
            prop: 'address',
            rules: [...required]
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '产品大类',
            prop: 'mainId',
            rules: [...required]
          },
          options: this.classifyList.map((v, i) => ({ value: v.categoryId, label: v.name })),
          attributes: {
            disabled: [2, 3].includes(this.formType),
            clearable: true,
            filterable: true,
            placeholder: '请选择'
          },
          events: {
            change: val => {
              this.formData.mainName =
                this.classifyList
                  .map((v, i) => ({ value: v.categoryId, label: v.name }))
                  .find(item => item.value === val)?.label || ''
              this.formData.smallId = ''
              this.formData.smallName = ''
            }
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '产品小类型',
            prop: 'smallId',
            rules: [...required]
          },
          options: this.classifyListLv2
            .filter(item => item.parentId === this.formData.mainId)
            .map((v, i) => ({ value: v.categoryId, label: v.name })),
          attributes: {
            disabled: [2, 3].includes(this.formType),
            clearable: true,
            filterable: true,
            placeholder: '请选择'
          },
          events: {
            change: val => {
              this.formData.smallName =
                this.classifyListLv2
                  .filter(item => item.parentId === this.formData.mainId)
                  .map((v, i) => ({ value: v.categoryId, label: v.name }))
                  .find(item => item.value === val)?.label || ''
            }
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '系列名称',
            prop: 'seriesName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '机型名称',
            prop: 'productName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入',
            maxlength: 13
          },
          formItemAttributes: {
            label: '内机条码',
            prop: 'insideCode',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入',
            maxlength: 13
          },
          formItemAttributes: {
            label: '外机条码',
            prop: 'outCode',
            rules: [101, 103, '101', '103'].includes(this.formData.mainId) ? [...required] : []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '发生数量',
            prop: 'num',
            rules: [...required]
          }
        },
        {
          name: 'el-date-picker',
          md: 6,
          attributes: {
            'picker-options': 'pickerOptions11',
            'popper-class': 'custom-popper11',
            'append-to-body': true,
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            disabled: [2, 3].includes(this.formType),
            style: { width: '100%' },
            type: 'date',
            placeholder: '请选择'
          },
          formItemAttributes: {
            label: '出厂日期',
            prop: 'outDate'
          }
        },
        {
          name: 'el-date-picker',
          md: 6,
          attributes: {
            'picker-options': 'pickerOptions11',
            'popper-class': 'custom-popper11',
            'append-to-body': true,
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            disabled: [2, 3].includes(this.formType),
            style: { width: '100%' },
            type: 'date',
            placeholder: '请选择'
          },
          formItemAttributes: {
            label: '安装或使用日期',
            prop: 'useDate',
            rules: [...required]
          }
        },
        {
          name: 'el-date-picker',
          md: 6,
          attributes: {
            'picker-options': 'pickerOptions11',
            'popper-class': 'custom-popper11',
            'append-to-body': true,
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            disabled: [2, 3].includes(this.formType),
            style: { width: '100%' },
            type: 'date',
            placeholder: '请选择'
          },
          formItemAttributes: {
            label: '报修或发生日期',
            prop: 'repairDate',
            rules: [...required]
          }
        },
        {
          md: 6,
          isShow: true,
          name: 'el-radio',
          options: [
            { label: '有', value: true },
            { label: '无', value: false }
          ],
          attributes: {
            disabled: [2, 3].includes(this.formType)
          },
          formItemAttributes: {
            label: '有无配件寄回',
            prop: 'isPartSend',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '故障配件名称及规格',
            prop: 'bugPartName'
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '故障代码(包含检测器检测)',
            prop: 'bugPartCode',
            rules: [...required]
          }
        },
        {
          md: 6,
          isShow: true,
          name: 'el-radio',
          options: [
            { label: '是', value: true },
            { label: '否', value: false }
          ],
          attributes: {
            disabled: [2, 3].includes(this.formType)
          },
          formItemAttributes: {
            label: '是否需要处理方案',
            prop: 'isNeedPlan',
            rules: [...required]
          }
        },
        {
          name: 'el-date-picker',
          md: 6,
          attributes: {
            'picker-options': 'pickerOptions11',
            'popper-class': 'custom-popper11',
            'append-to-body': true,
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            disabled: [2, 3].includes(this.formType),
            style: { width: '100%' },
            type: 'date',
            placeholder: '请选择'
          },
          formItemAttributes: {
            label: '要求提供日期',
            prop: 'supplyDate',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '故障描述',
            prop: 'bugRemark',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '网点分析',
            prop: 'websitAnalyse',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '网点处理方法',
            prop: 'websitHandleMethod',
            rules: [...required]
          }
        },
        {
          md: 5,
          name: 'slot-component',
          formItemAttributes: {
            label: '内机条码',
            prop: 'neijitiaoma',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            return (
              <ImageUpload fileList={this.formData.neijitiaoma} limit={1} isEdit={![2, 3].includes(this.formType)} />
            )
          }
        },
        {
          md: 5,
          name: 'slot-component',
          formItemAttributes: {
            label: '外机条码',
            prop: 'waijitiaoma',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <ImageUpload fileList={this.formData.waijitiaoma} limit={1} isEdit={![2, 3].includes(this.formType)} />
            )
          }
        },
        {
          md: 14,
          name: 'slot-component',
          formItemAttributes: {
            label: '其他',
            prop: 'qita',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload fileList={this.formData.qita} limit={3} isEdit={![2, 3].includes(this.formType)} />
                <div style="color:orange">可上传最多3个图片</div>
              </div>
            )
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '附件',
            prop: 'fujian',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload fileList={this.formData.fujian} limit={9} isEdit={![2, 3].includes(this.formType)} />
                <div style="color:orange">可上传最多9个文件，不限文件格式</div>
              </div>
            )
          }
        }
      ]
    },
    items2() {
      return [
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '网点提交人',
            prop: 'createBy'
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '网点提交时间',
            prop: 'createTime'
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '中心审核人',
            prop: 'confirmBy'
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: 'confirmTime',
            prop: 'title'
          }
        },
        {
          md: 24,
          name: 'el-radio',
          options: [
            { label: '通过', value: 'OK' },
            { label: '驳回不可修改', value: 'FAIL' },
            { label: '驳回可修改', value: 'REJECT' }
          ],
          attributes: {
            disabled: [0, 1, 3].includes(this.formType)
          },
          formItemAttributes: {
            label: '中心审核',
            prop: 'status',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [0, 1, 3].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '审核备注',
            prop: 'remark',
            rules: [...required]
          }
        }
      ]
    }
  },
  methods: {
    getClassifyListData() {
      // 获取产品大类小类
      getClassifyList({ type: 2, status: true }).then(res => {
        var classifyListLv2 = []
        this.classifyList = res.data.map(item => {
          var { children, ...data } = item
          classifyListLv2.push(...(children || []))
          return {
            ...data
          }
        })
        this.classifyListLv2 = classifyListLv2
      })
      // 获取可选网点
      getWebsit({ status: true }).then(res => {
        this.createWebsitList = res.data.map(item => ({
          value: item.websitId,
          label: item.name
        }))
      })
    },
    getinitlbslist() {
      // 初始化请求省市区街道下拉选项数据
      lbsAmapRegion({ pid: 0 }).then(res => {
        this.provinceList = res.data
        if (this.formData.provinceId) {
          lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
            this.cityList = res.data
          })
        }
        if (this.formData.cityId) {
          lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
            this.areaList = res.data
          })
        }
        if (this.formData.areaId) {
          lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
            this.streetList = res.data
          })
        }
      })
    },
    delDataK(num) {
      if (num <= 1) {
        // 删除市
        this.formData.cityId = ''
        this.formData.city = ''
        // 删除市选项
        this.cityList = []
      }
      if (num <= 2) {
        // 删除区
        this.formData.areaId = ''
        this.formData.area = ''
        // 删除区选项
        this.areaList = []
      }
      if (num <= 3) {
        // 删除街道
        this.formData.streetId = ''
        this.formData.street = ''
        // 删除街道选项
        this.streetList = []
      }
      // 删除地址
      this.formData.address = ''
    },
    // 列表请求函数
    getList: qualityFeedbackList,
    // 导出
    exportList: qualityFeedbackListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 获取勾选框数据
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.getClassifyListData()
            qualityFeedbackDetail({
              id: row.id
            }).then(res => {
              this.formData = {
                ...res.data,
                fujian: res.data.items.filter(item => item.type === 'FILE').map(item => ({ url: item.url })),
                neijitiaoma: res.data.items
                  .filter(item => item.type === 'INSIDE_CODE')
                  .map(item => ({ url: item.url })),
                waijitiaoma: res.data.items.filter(item => item.type === 'OUT_CODE').map(item => ({ url: item.url })),
                qita: res.data.items.filter(item => item.type === 'OTHER').map(item => ({ url: item.url }))
              }
              this.$nextTick(() => {
                this.getinitlbslist()
                this.formType = 1
                this.formBool = true
              })
            })
          }
        },
        centralAudit: {
          conditions: ({ row, index, column }) => {
            return row.status == 'WAIT'
          },
          click: ({ row, index, column }) => {
            this.getClassifyListData()
            qualityFeedbackDetail({
              id: row.id
            }).then(res => {
              this.formData = {
                ...res.data,
                fujian: res.data.items.filter(item => item.type === 'FILE').map(item => ({ url: item.url })),
                neijitiaoma: res.data.items
                  .filter(item => item.type === 'INSIDE_CODE')
                  .map(item => ({ url: item.url })),
                waijitiaoma: res.data.items.filter(item => item.type === 'OUT_CODE').map(item => ({ url: item.url })),
                qita: res.data.items.filter(item => item.type === 'OTHER').map(item => ({ url: item.url })),
                status: ''
              }
              this.$nextTick(() => {
                this.getinitlbslist()
                this.formType = 2
                this.formBool = true
              })
            })
          }
        },
        details: {
          click: ({ row, index, column }) => {
            this.getClassifyListData()
            qualityFeedbackDetail({
              id: row.id
            }).then(res => {
              this.formData = {
                ...res.data,
                fujian: res.data.items.filter(item => item.type === 'FILE').map(item => ({ url: item.url })),
                neijitiaoma: res.data.items
                  .filter(item => item.type === 'INSIDE_CODE')
                  .map(item => ({ url: item.url })),
                waijitiaoma: res.data.items.filter(item => item.type === 'OUT_CODE').map(item => ({ url: item.url })),
                qita: res.data.items.filter(item => item.type === 'OTHER').map(item => ({ url: item.url }))
              }
              this.$nextTick(() => {
                this.getinitlbslist()
                this.formType = 3
                this.formBool = true
              })
            })
          }
        }
      })
    },
    handleClose() {
      this.$refs?.pageRef?.refreshList()
      this.$data.formData = this.$options.data().formData
      this.formType = 0
      this.formBool = false
    },
    formConfirm(status) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ;(this.formData.id ? qualityFeedbackUpdate : qualityFeedbackAdd)({
            ...this.formData,
            items: [
              ...this.formData.neijitiaoma.map(item => ({
                qualityFeedbckId: this.formData.id || undefined,
                type: 'INSIDE_CODE',
                url: item.url
              })),
              ...this.formData.waijitiaoma.map(item => ({
                qualityFeedbckId: this.formData.id || undefined,
                type: 'OUT_CODE',
                url: item.url
              })),
              ...this.formData.qita.map(item => ({
                qualityFeedbckId: this.formData.id || undefined,
                type: 'OTHER',
                url: item.url
              })),
              ...this.formData.fujian.map(item => ({
                qualityFeedbckId: this.formData.id || undefined,
                type: 'FILE',
                url: item.url
              }))
            ],
            status,
            fujian: undefined,
            neijitiaoma: undefined,
            waijitiaoma: undefined,
            qita: undefined
          }).then(res => {
            this.$message({ type: 'success', message: '提交成功!' })
            this.$refs.pageRef.refreshList()
            this.handleClose()
          })
        }
      })
    },
    formConfirmShenHe() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          qualityFeedbackConfirm({
            id: this.formData.id,
            status: this.formData.status,
            remark: this.formData.remark
          }).then(res => {
            this.$message({ type: 'success', message: '审核成功!' })
            this.$refs.pageRef.refreshList()
            this.handleClose()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>