jsm-mall-front/src/views/workOrder/appraiseAppeal/appraisalStatement/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="100px" :form-data="formData" :form-items="items" />
              <zj-form-module title="申诉信息" label-width="100px" :form-data="formData" :form-items="items2" />
              <zj-form-module
                v-if="[3, 4].includes(formType) || (this.formData.parentCategoryId && [5].includes(formType))"
                title="中心审核信息"
                label-width="140px"
                :form-data="formData"
                :form-items="items3"
              />
            </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, 2].includes(formType)" size="mini" @click="formConfirm" type="primary"
              >确 定</el-button
            >
            <el-button v-if="[3, 4].includes(formType)" size="mini" @click="quedingshenhe" type="primary"
              >确 定</el-button
            >
            <el-button v-if="[3, 4].includes(formType)" size="mini" @click="bohuidaishenshu" 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 {
  appraiseApplyApplyList,
  appraiseApplyApplyListExport,
  appraiseApplyApplyDetail,
  appraiseApplyApplySubmit,
  appraiseApplyApplyConfirm,
  appraiseApplyBatchUpdateEnd,
  appraiseApplyBatchUpdateReset,
  appraiseApplyApplyReject
} from '@/api/appraisalStatement'
import operation_mixin from '@/components/template/operation_mixin.js'
import { required, requiredValueMin } from '@/components/template/rules_verify.js'
import { orderBaseDetail } from '@/api/workOrderPool.js'
import { EventBus } from '@/utils/eventBus'
import ImageUpload from '@/components/file-upload'
import { appraiseApplyCategoryList } from '@/api/explainTypeConfig.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, //0新增，1指定申诉，2二次申诉，3第一次审核信息部审核，4第二次审核结算组审核，5详情
      formData: {
        applyBy: '',
        applyTime: '',
        appraiseContent: '',
        appraiseStatus: '',
        categoryId: '',
        categoryName: '',
        examineResult: '',
        examineRemark: '',
        infoConfirmTime: '',
        isWebsitCall: '',
        items: [],
        orderBaseId: '',
        orderSmallType: '',
        orderSmallTypeText: '',
        orderType: '',
        overTime: '',
        parentCategoryId: '',
        parentCategoryName: '',
        reason: '',
        applyRemark: '',
        settleConfirmTime: '',
        websitId: '',
        websitName: '',
        websitResult: '',
        workerId: '',
        workerIdcard: '',
        workerMobile: '',
        workerName: '',
        workerNumber: '',
        workerResult: '',
        recordingFile: [],
        applicationDocument: []
      },
      formRules: {},
      appraiseApplyCategoryList: []
    }
  },
  computed: {
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.formType = 0
                this.formBool = true
              }
            })
          ],
          [
            this.optionsEvensAuth('dismissedWithoutAppeal', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选工单')
                  return
                }
                appraiseApplyBatchUpdateEnd(this.recordSelected.map(item => item.id)).then(res => {
                  this.$message({ type: 'success', message: '成功!' })
                  this.$refs.pageRef.refreshList()
                })
              }
            })
          ],
          [
            this.optionsEvensAuth('reappealDenied', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选工单')
                  return
                }
                appraiseApplyBatchUpdateReset(this.recordSelected.map(item => item.id)).then(res => {
                  this.$message({ type: 'success', message: '成功!' })
                  this.$refs.pageRef.refreshList()
                })
              }
            })
          ]
        ]
      ]
    },
    items() {
      return [
        ...(() => {
          if (this.formType == 0) {
            return [
              {
                name: 'el-input',
                md: 6,
                attributes: {
                  disabled: false,
                  placeholder: '请输入'
                },
                formItemAttributes: {
                  label: '工单单号',
                  prop: 'orderBaseId',
                  rules: [...required]
                },
                slots: {
                  append: (h, { props, onInput }) => {
                    return (
                      <el-button type="primary" onClick={this.fuzhigongdanneirong}>
                        确定
                      </el-button>
                    )
                  }
                }
              }
            ]
          } else {
            return [
              {
                name: 'el-input',
                md: 6,
                attributes: {
                  disabled: true,
                  placeholder: '请输入'
                },
                formItemAttributes: {
                  label: '工单单号',
                  prop: 'orderBaseId',
                  rules: [...required]
                }
              }
            ]
          }
        })(),
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '工单类型',
            prop: 'orderSmallTypeText',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '客户姓名',
            prop: 'userName',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '联系电话',
            prop: 'userMobile',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 12,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '联系地址',
            prop: 'address',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '主要工程师',
            prop: 'workerName',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '完工时间',
            prop: 'overTime',
            rules: []
          }
        },
        {
          name: 'el-select',
          options: [
            { label: '默认好评', value: 'D' },
            { label: '好评', value: 'A' },
            { label: '中评', value: 'B' },
            { label: '差评', value: 'C' },
            { label: '未评价', value: 'N' },
            { label: '其他', value: 'O' }
          ],
          md: 6,
          attributes: { disabled: true, placeholder: '请选择', width: '100%' },
          formItemAttributes: { label: '评价类型', prop: 'appraiseStatus' }
        },
        {
          name: 'el-input',
          md: 18,
          attributes: {
            disabled: ![0, 1, 2].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '评价内容',
            prop: 'appraiseContent',
            rules: [...required]
          }
        }
      ]
    },
    items2() {
      return [
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '所属网点',
            prop: 'websitName',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '申诉人',
            prop: 'applyBy',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '申诉时间',
            prop: 'applyTime',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: ![0, 1, 2].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '申诉理由',
            prop: 'reason',
            rules: [...required]
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '录音文件',
            prop: 'recordingFile',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload
                  serialNumber={'b'}
                  fileList={this.formData.recordingFile}
                  limit={1}
                  isEdit={[0, 1, 2].includes(this.formType)}
                  fileType={['video']}
                />
                <h4>仅支持MP3/MP4</h4>
              </div>
            )
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '申请图片',
            prop: 'applicationDocument',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <ImageUpload
                serialNumber={'a'}
                fileList={this.formData.applicationDocument}
                limit={100}
                isEdit={[0, 1, 2].includes(this.formType)}
                fileType={['image']}
              />
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: ![0, 1, 2].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '申诉备注',
            prop: 'applyRemark',
            rules: []
          }
        }
      ]
    },
    items3() {
      return [
        {
          name: 'el-select',
          md: 6,
          options: this.appraiseApplyCategoryList
            .filter(item => item.parentId == 0)
            .map(item => ({ label: item.name, value: item.id })),
          attributes: {
            disabled: ![3, 4].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '问题大类',
            prop: 'parentCategoryId',
            rules: [...required]
          },
          events: {
            change: val => {
              this.formData.categoryId = ''
            }
          }
        },
        {
          name: 'el-select',
          md: 6,
          options: this.appraiseApplyCategoryList
            .filter(item => item.parentId == this.formData.parentCategoryId)
            .map(item => ({ label: item.name, value: item.id })),
          attributes: {
            disabled: ![3, 4].includes(this.formType),
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '问题小类',
            prop: 'categoryId',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '审核人',
            prop: 'confirmBy',
            rules: []
          }
        },
        ...(() => {
          if (this.formData.isSecond) {
            return [
              {
                name: 'el-input',
                md: 6,
                attributes: {
                  disabled: true,
                  placeholder: '请输入'
                },
                formItemAttributes: {
                  label: '审核时间',
                  prop: 'settleConfirmTime',
                  rules: []
                }
              }
            ]
          } else {
            return [
              {
                name: 'el-input',
                md: 6,
                attributes: {
                  disabled: true,
                  placeholder: '请输入'
                },
                formItemAttributes: {
                  label: '审核时间',
                  prop: 'infoConfirmTime',
                  rules: []
                }
              }
            ]
          }
        })(),
        {
          md: 24,
          isShow: [3, 4, 5].includes(this.formType),
          name: 'el-radio',
          options: [
            { label: '是', value: true },
            { label: '否', value: false }
          ],
          attributes: {},
          formItemAttributes: {
            label: '网点是否指引用户接听400回访电话',
            prop: 'isWebsitCall',
            rules: [...required]
          }
        },
        {
          md: 24,
          isShow: [3, 4, 5].includes(this.formType),
          name: 'el-radio',
          options: [
            { label: '无责', value: 'NOT' },
            { label: '全责', value: 'ALL' },
            { label: '半责', value: 'HALF' }
          ],
          attributes: {},
          formItemAttributes: {
            label: '判定网点',
            prop: 'websitResult',
            rules: [...required]
          }
        },
        {
          md: 24,
          isShow: [3, 4, 5].includes(this.formType),
          name: 'el-radio',
          options: [
            { label: '无责', value: 'NOT' },
            { label: '全责', value: 'ALL' },
            { label: '半责', value: 'HALF' }
          ],
          attributes: {},
          formItemAttributes: {
            label: '判定服务人员',
            prop: 'workerResult',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: ![3, 4].includes(this.formType),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '审核备注',
            prop: 'examineRemark',
            rules: [...required]
          }
        }
      ]
    }
  },
  created() {
    if (this.pageType == 'zhidingshenshu') {
      this.formData.orderBaseId = this.pageCode
      this.fuzhigongdanneirong()
      this.formType = 1
      this.formBool = true
    }
  },
  methods: {
    // 列表请求函数
    getList: appraiseApplyApplyList,
    // 导出
    exportList: appraiseApplyApplyListExport,
    // 辅材工单内容
    fuzhigongdanneirong() {
      if (!this.formData.orderBaseId) {
        return
      }
      orderBaseDetail({
        orderBaseId: this.formData.orderBaseId
      }).then(res => {
        var {
          orderSmallType,
          orderSmallTypeText,
          orderType,
          orderTypeText,
          websitId,
          websitName,
          workerId,
          workerIdcard,
          workerMobile,
          workerName,
          workerNumber,
          userName,
          address,
          userMobile,
          overTime,
          appraiseStatus,
          appraiseContent
        } = res.data
        Object.assign(this.formData, {
          orderSmallType,
          orderSmallTypeText,
          orderType,
          orderTypeText,
          websitId,
          websitName,
          workerId,
          workerIdcard,
          workerMobile,
          workerName,
          workerNumber,
          userName,
          address,
          userMobile,
          overTime,
          appraiseStatus,
          appraiseContent
        })
      })
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 获取勾选框数据
    selectionChange(data) {
      this.recordSelected = data
    },
    handleClose() {
      if (this.pageType == 'zhidingshenshu') {
        EventBus.$emit('closeSelectedTag_wb')
      } else {
        this.$refs?.pageRef?.refreshList()
        this.$data.formData = this.$options.data().formData
        this.formType = 0
        this.formBool = false
      }
    },
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          appraiseApplyApplySubmit({
            ...this.formData,
            items: [
              ...this.formData.recordingFile.map(item => ({ ...item, type: 'C' })),
              ...this.formData.applicationDocument.map(item => ({ ...item, type: 'I' }))
            ]
          }).then(res => {
            this.$message({ type: 'success', message: '成功!' })
            if (this.pageType == 'zhidingshenshu') {
              this.$router.push({
                name: 'appraisalStatement'
              })
            } else {
              this.$refs.pageRef.refreshList()
              this.handleClose()
            }
          })
        }
      })
    },
    quedingshenhe() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          appraiseApplyApplyConfirm({
            ...this.formData,
            items: [
              ...this.formData.recordingFile.map(item => ({ ...item, type: 'C' })),
              ...this.formData.applicationDocument.map(item => ({ ...item, type: 'I' }))
            ]
          }).then(res => {
            this.$message({ type: 'success', message: '成功!' })
            this.$refs.pageRef.refreshList()
            this.handleClose()
          })
        }
      })
    },
    bohuidaishenshu() {
      appraiseApplyApplyReject({
        id: this.formData.id
      }).then(res => {
        this.$message({ type: 'success', message: '成功!' })
        this.$refs.pageRef.refreshList()
        this.handleClose()
      })
    },
    operation() {
      return this.operationBtn({
        // 详情
        details: {
          click: ({ row, index, column }) => {
            appraiseApplyApplyDetail({
              id: row.id
            }).then(res => {
              appraiseApplyCategoryList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
                this.appraiseApplyCategoryList = res.data.records
              })
              this.formData = {
                ...res.data,
                recordingFile: (res.data?.items || []).filter(item => item.type == 'C'),
                applicationDocument: (res.data?.items || []).filter(item => item.type == 'I')
              }
              this.$nextTick(() => {
                this.formType = 5
                this.formBool = true
              })
            })
          }
        },
        // 申诉
        statement: {
          conditions: ({ row, index, column }) => {
            return row.isSecond == false && row.status == 'WAIT'
          },
          click: ({ row, index, column }) => {
            appraiseApplyApplyDetail({
              id: row.id
            }).then(res => {
              appraiseApplyCategoryList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
                this.appraiseApplyCategoryList = res.data.records
              })
              this.formData = {
                ...res.data,
                recordingFile: (res.data?.items || []).filter(item => item.type == 'C'),
                applicationDocument: (res.data?.items || []).filter(item => item.type == 'I')
              }
              this.$nextTick(() => {
                this.formType = 2
                this.formBool = true
              })
            })
          }
        },
        // 二次申诉
        secondStatement: {
          conditions: ({ row, index, column }) => {
            return row.isSecond == true && row.status == 'WAIT'
          },
          click: ({ row, index, column }) => {
            appraiseApplyApplyDetail({
              id: row.id
            }).then(res => {
              appraiseApplyCategoryList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
                this.appraiseApplyCategoryList = res.data.records
              })
              this.formData = {
                ...res.data,
                recordingFile: (res.data?.items || []).filter(item => item.type == 'C'),
                applicationDocument: (res.data?.items || []).filter(item => item.type == 'I')
              }
              this.$nextTick(() => {
                this.formType = 2
                this.formBool = true
              })
            })
          }
        },
        // 信息部审核
        InfoDepartmentAudit: {
          conditions: ({ row, index, column }) => {
            return row.isSecond == false && row.status == 'WAIT_CENTER'
          },
          click: ({ row, index, column }) => {
            appraiseApplyApplyDetail({
              id: row.id
            }).then(res => {
              appraiseApplyCategoryList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
                this.appraiseApplyCategoryList = res.data.records
              })
              this.formData = {
                ...res.data,
                recordingFile: (res.data?.items || []).filter(item => item.type == 'C'),
                applicationDocument: (res.data?.items || []).filter(item => item.type == 'I')
              }
              this.$nextTick(() => {
                this.formType = 3
                this.formBool = true
              })
            })
          }
        },
        // 结算组审核
        clearingSectionAudit: {
          conditions: ({ row, index, column }) => {
            return row.isSecond == true && row.status == 'WAIT_CENTER'
          },
          click: ({ row, index, column }) => {
            appraiseApplyApplyDetail({
              id: row.id
            }).then(res => {
              appraiseApplyCategoryList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
                this.appraiseApplyCategoryList = res.data.records
              })
              this.formData = {
                ...res.data,
                recordingFile: (res.data?.items || []).filter(item => item.type == 'C'),
                applicationDocument: (res.data?.items || []).filter(item => item.type == 'I')
              }
              this.$nextTick(() => {
                this.formType = 4
                this.formBool = true
              })
            })
          }
        }
      })
    }
  }
}
</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>