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()"
    :moreParameters="moreParameters"
    :expName="expName"
    :searchSelectDynamicData="searchSelectDynamicData"
    :searchSelectOnChanre="searchSelectOnChanre"
  >
    <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-module title="审批记录">
                <zj-table
                  :columns="operationDetailColumns"
                  :tableData="logList"
                  :tableAttributes="{
                    border: true
                  }"
                ></zj-table>
              </zj-form-module>
            </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
            >
            <el-button v-if="~[3].indexOf(formType)" size="mini" @click="xiazaifujian" 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,
  qualityFeedbackDownZip
} 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: '',
        insideProductName: '',
        outProductName: '',
        fujian: [],
        neijitiaoma: [],
        waijitiaoma: [],
        qita: []
      },
      formRules: {},
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      classifyList: [],
      classifyListLv2: [],
      createWebsitList: [],
      statusTypeList: [],
      expName: '',
      kaiguan: true,
      searchSelectDynamicData: {
        PRODUCT_CATEGORY: [],
        PRODUCT_SUBCLASS: []
      },
      searchSelectOnChanre: {
        // 产品大类
        PRODUCT_CATEGORY: (v, data) => {
          data.queryData.find(item => item.param === 'a.small_id').value = ''
          this.searchSelectDynamicData.PRODUCT_SUBCLASS = this.PRODUCT_SUBCLASS.filter(item => item.parentId === v)
        },
        // 产品小类
        PRODUCT_SUBCLASS: (v, data) => {}
      },
      logList: []
    }
  },
  created() {
    getClassifyList({ type: 2, status: true }).then(res => {
      var classifyListLv2 = []
      this.searchSelectDynamicData.PRODUCT_CATEGORY = res.data.map(item => {
        var { children, ...data } = item
        classifyListLv2.push(
          ...(children || []).map(item => {
            return {
              label: item.name,
              value: item.categoryId,
              parentId: item.parentId
            }
          })
        )
        return {
          label: item.name,
          value: item.categoryId
        }
      })
      this.PRODUCT_SUBCLASS = classifyListLv2
    })
  },
  computed: {
    operationDetailColumns() {
      return [
        {
          columnAttributes: {
            label: '网点提交时间',
            prop: 'submitTime'
          }
        },
        {
          columnAttributes: {
            label: '网点提交人',
            prop: 'submitBy'
          }
        },
        {
          columnAttributes: {
            label: '审核结果',
            prop: 'status'
          },
          render: (h, { row, column, index }) => {
            return (
              <div style="padding: 0 10px">
                {{ OK: '通过', REJECT: '驳回可修改', FAIL: '驳回不可修改' }[row.status]}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '审核备注',
            prop: 'remark'
          }
        },
        {
          columnAttributes: {
            label: '中心审核人',
            prop: 'confirmBy'
          }
        },
        {
          columnAttributes: {
            label: '中心审核时间',
            prop: 'confirmTime'
          }
        }
      ]
    },
    moreParameters() {
      return [
        {
          name: '状态',
          key: 'status',
          value: '',
          conditions: [
            {
              label: '全部',
              value: ''
            },
            ...this.statusTypeList
          ]
        }
      ]
    },
    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: []
          }
        },
        {
          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: 18,
          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,
              {
                validator: (rule, value, callback) => {
                  if (~`${value}`.indexOf(' ')) {
                    callback(new Error('存在空格'))
                  } else if (`${value}`.length != 13) {
                    callback(new Error('请输入13位条码'))
                  } else {
                    callback()
                  }
                },
                trigger: 'blur'
              }
            ]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '内机型号',
            prop: 'insideProductName',
            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,
                  {
                    validator: (rule, value, callback) => {
                      if (~`${value}`.indexOf(' ')) {
                        callback(new Error('存在空格'))
                      } else if (`${value}`.length != 13) {
                        callback(new Error('请输入13位条码'))
                      } else {
                        callback()
                      }
                    },
                    trigger: 'blur'
                  }
                ]
              : [
                  {
                    validator: (rule, value, callback) => {
                      if (~`${value}`.indexOf(' ')) {
                        callback(new Error('存在空格'))
                      } else if (`${value}`.length != 13 && `${value}`.length != 0) {
                        callback(new Error('请输入13位条码'))
                      } else {
                        callback()
                      }
                    },
                    trigger: 'blur'
                  }
                ]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: [2, 3].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '外机型号',
            prop: 'outProductName',
            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]
          }
        },
        // {
        //   isShow: this.formOptions.appointmentTime.isShow,
        //   name: 'el-date-picker',
        //   md: 6,
        //   attributes: {
        //     'picker-options': 'pickerOptions11',
        //     'popper-class': 'custom-popper11',
        //     'append-to-body': true,
        //     disabled: !this.formOptions.appointmentTime.isEdit,
        //     style: { width: '100%' },
        //     type: 'datetime',
        //     placeholder: '请选择',
        //     'value-format': 'yyyy-MM-dd HH:mm:ss',
        //     'picker-options': {
        //       disabledDate: time => {
        //         var data = this.orderInfo?.appointmentTime?.split(' ')?.[0]
        //         return (
        //           time.getTime() < new Date(data ? `${data} 00:00:00` : '').getTime() ||
        //           time.getTime() > new Date(data ? `${data} 23:59:59` : '').getTime()
        //         )
        //       }
        //     }
        //   },
        //   events: {
        //     change: value => {
        //       if (value && new Date(value).getTime() < new Date().getTime() - 2000) {
        //         this.orderInfo.appointmentEndTime = ''
        //         this.$message.warning('必须大于当前时间')
        //       } else if (value && new Date(value).getTime() < new Date(this.orderInfo?.appointmentTime).getTime()) {
        //         this.orderInfo.appointmentTime = value
        //       }
        //     }
        //   },
        //   formItemAttributes: {
        //     label: '预约上门结束时间',
        //     prop: 'appointmentEndTime',
        //     rules: this.formOptions.appointmentTime.isRules
        //   }
        // },
        {
          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: '请选择',
            'picker-options': {
              disabledDate: time => {
                if (time.getTime() > new Date()) {
                  return true
                }
                if (this.formData.useDate) {
                  var data = this.formData.useDate?.split(' ')?.[0]
                  return time.getTime() >= new Date(data ? `${data} 00:00:00` : '')
                } else {
                  return false
                }
              }
            }
          },
          formItemAttributes: {
            label: '出厂日期',
            prop: 'outDate'
          },
          events: {
            change: value => {
              if (!this.formData.useDate) {
                this.formData.repairDate = ''
              }
            }
          }
        },
        {
          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: '请选择',
            'picker-options': {
              disabledDate: time => {
                if (time.getTime() > new Date()) {
                  return true
                }
                var a = false
                var b = false
                if (this.formData.outDate) {
                  let data = this.formData.outDate?.split(' ')?.[0]
                  a = time.getTime() <= new Date(data ? `${data} 00:00:00` : '')
                }
                if (this.formData.repairDate) {
                  let data = this.formData.repairDate?.split(' ')?.[0]
                  b = time.getTime() > new Date(data ? `${data} 00:00:00` : '')
                }
                return a || b
              }
            }
          },
          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: '请选择',
            'picker-options': {
              disabledDate: time => {
                if (time.getTime() > new Date()) {
                  return true
                }
                if (this.formData.useDate) {
                  var data = this.formData.useDate?.split(' ')?.[0]
                  return time.getTime() < new Date(data ? `${data} 00:00:00` : '')
                } else {
                  return false
                }
              }
            }
          },
          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: this.formData.isNeedPlan ? [...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
                fileType={['image']}
                fileList={this.formData.neijitiaoma}
                limit={1}
                isEdit={![2, 3].includes(this.formType)}
                serialNumber="diyi"
              />
            )
          }
        },
        {
          md: 5,
          name: 'slot-component',
          formItemAttributes: {
            label: '外机条码',
            prop: 'waijitiaoma',
            rules: [101, 103, '101', '103'].includes(this.formData.mainId) ? [...required] : []
          },
          render: (h, { props, onInput }) => {
            return (
              <ImageUpload
                fileType={['image']}
                fileList={this.formData.waijitiaoma}
                limit={1}
                isEdit={![2, 3].includes(this.formType)}
                serialNumber="dier"
              />
            )
          }
        },
        {
          md: 14,
          name: 'slot-component',
          formItemAttributes: {
            label: '其他',
            prop: 'qita',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload
                  fileType={['image']}
                  fileList={this.formData.qita}
                  limit={3}
                  isEdit={![2, 3].includes(this.formType)}
                  serialNumber="disan"
                />
                <div style="color:orange">可上传最多3个图片</div>
              </div>
            )
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '附件',
            prop: 'fujian',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload
                  serialNumber="disi"
                  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: 'submitBy'
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '网点提交时间',
            prop: 'submitTime'
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '中心审核人',
            prop: 'confirmBy'
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '审核时间',
            prop: 'confirmTime'
          }
        },
        {
          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]
            rules: []
          }
        }
      ]
    }
  },
  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(p, cb) {
      var pam = JSON.parse(JSON.stringify(p))
      try {
        if (pam.status) {
          pam.params.push({ param: 'a.status', compare: '=', value: pam.status })
          this.expName = `${this.$route.meta.title}-${
            { SAVE: '保存', WAIT: '待中心审核', OK: '通过', REJECT: '驳回可修改', FAIL: '驳回不可修改' }[pam.status]
          }`
        } else {
          this.expName = ''
        }
        cb && cb(pam)
        return qualityFeedbackList(pam)
      } catch (err) {
      } finally {
        qualityFeedbackCount().then(res => {
          this.statusTypeList = [
            {
              label: `保存`,
              value: 'SAVE'
            },
            {
              label: `待中心审核`,
              value: 'WAIT'
            },
            {
              label: `通过`,
              value: 'OK'
            },
            {
              label: `驳回可修改`,
              value: 'REJECT'
            },
            {
              label: `驳回不可修改`,
              value: 'FAIL'
            }
          ].map(item => {
            if (item.value === 'SAVE') {
              item.label = `${item.label}(${res.data.saveCount || 0})`
            } else if (item.value === 'WAIT') {
              item.label = `${item.label}(${res.data.waitCount || 0})`
            } else if (item.value === 'REJECT') {
              item.label = `${item.label}(${res.data.rejectCount || 0})`
            }
            return { ...item }
          })
        })
      }
    },
    // 导出
    exportList: qualityFeedbackListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 获取勾选框数据
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return this.operationBtn({
        edit: {
          conditions: ({ row, index, column }) => {
            return ['SAVE', 'REJECT'].includes(row.status)
          },
          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.logList = res.data.recordList
              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.logList = res.data.recordList
              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.logList = res.data.recordList
              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()
          })
        }
      })
    },
    xiazaifujian() {
      if (this.kaiguan) {
        this.kaiguan = false
        qualityFeedbackDownZip(
          {
            id: this.formData.id
          },
          '',
          `${this.formData.title}.zip`
        )
          .then(res => {
            this.kaiguan = true
            this.$message({ type: 'success', message: '下载成功!' })
          })
          .catch(() => {
            this.kaiguan = true
          })
      } else {
        this.$message({ type: 'success', message: '正在下载请稍等!' })
      }
    }
  }
}
</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>