zfire-newmall-admin/src/views/engineerFeeSettlement/costPerDimension/index.vue

<template>
  <template-page v-if="showTable" ref="pageRef" :get-list="[getList1, getList2][pageLevel]"
    :exportList="[exportList1, exportList2][pageLevel]"
    :options-evens-group="[optionsEvensGroup1, optionsEvensGroup2][pageLevel]"
    :operation="([operation1, operation2][pageLevel])()" :expCode="['exp', 'detailExp'][pageLevel]"
    :table-attributes="tableAttributes" :table-events="tableEvents" :moreParameters="moreParameters"
    :column-parsing="columnParsing">
    <div slot="moreSearch" v-if="pageLevel==0">
			<el-radio-group v-model="tagStatus" size="mini" @change="changeType">
				<el-radio-button label="">全部</el-radio-button>
				<el-radio-button label="NO">未汇总</el-radio-button>
				<el-radio-button label="YES">已汇总</el-radio-button>
			</el-radio-group>
			<br><br>
		</div>
    <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-attributes="{ size: 'mini' }">
              <zj-form-module title="基本信息" label-width="130px" :form-data="formData" :form-items="formItems" />
            </zj-form-container>
          </zj-page-fill>
          <div>
            <div style="box-sizing: border-box; padding: 10px;text-align: right;">
              <el-button size="mini" @click="handleClose">取 消</el-button>
              <el-button v-if="!formEdit" size="mini" @click="formConfirm" type="primary">确 定</el-button>
            </div>
          </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, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { settleExpenseGatherList, settleExpenseGatherListExport, settleExpenseImport, settleExpenseMonthGather, settleExpenseList, settleExpenseListExport, settleExpenseGatherBatchDel, settleExpenseBatchDel, settleExpenseSave } from "@/api/costPerDimension";
import { commonTemplateDownload } from '@/api/common.js'
import { memberListPageV2 } from "@/api/masterManagement";
export default {
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      pageLevel: 0,
      showTable: true,
      collectItem: {},
      formData: {
        companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
      },
      formBool: false,
      formEdit: false,
      workerList: [],
      tagStatus: this?.pageCode || ""
    }
  },
  computed: {
    optionsEvensGroup1() {
      return [
        [
          [
            this.optionsEvensAuth("batchSummary", {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选工单')
                  return
                }
                this.$prompt('汇总名称', '汇总', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  inputPattern: /\S/,
                  inputErrorMessage: '名称不能为空'
                }).then(({ value }) => {
                  settleExpenseMonthGather({
                    ids: this.recordSelected.map(item => item.id),
                    name: value
                  }).then(res => {
                    this.$message({
                      type: 'success',
                      message: '操作成功！'
                    })
                    this.$refs?.pageRef?.refreshList()
                  })
                }).catch(() => {

                });
              }
            })
          ],
          [
            this.optionsEvensAuth(["import", "download1", "download2", "download3", "download4"], {
              name: '导入费用',
              click: () => { }
            }),
            this.optionsEvensAuth("import", ({ moduleName }) => {
              return {
                name: moduleName,
                render: () => {
                  return this.importButton(settleExpenseImport, moduleName)
                }
              }
            }),
            this.optionsEvensAuth("download1", {
              click: () => {
                commonTemplateDownload({ name: '师傅费用结算导入模板(其它).xlsx' }, `师傅费用结算导入模板(其它)`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            }),
            this.optionsEvensAuth("download2", {
              click: () => {
                commonTemplateDownload({ name: '师傅费用结算导入模板(安装其它).xlsx' }, `师傅费用结算导入模板(安装其它)`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            }),
            this.optionsEvensAuth("download3", {
              click: () => {
                commonTemplateDownload({ name: '师傅费用结算导入模板(安装家用空调).xlsx' }, `师傅费用结算导入模板(安装家用空调)`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            }),
            this.optionsEvensAuth("download4", {
              click: () => {
                commonTemplateDownload({ name: '师傅费用结算导入模板(维修).xlsx' }, `师傅费用结算导入模板(维修)`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            }),
          ],
        ]
      ]
    },
    optionsEvensGroup2() {
      return [
        [
          [
            {
              name: "返回汇总页面",
              click: () => {
                this.pageLevel = 0
              }
            }
          ],
        ],
        ...(() => {
          if (this.collectItem.status != "YES") {
            return [
              [
                [
                  this.optionsEvensAuth("detailAdd", {
                    click: () => {
                      this.formBool = true
                      this.getWorkers()
                    }
                  })
                ],
                [
                  this.optionsEvensAuth("detailBatchDel", {
                    click: () => {
                      if (this.recordSelected.length === 0) {
                        this.$message.warning('请勾选工单')
                        return
                      }
                      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        settleExpenseBatchDel(this.recordSelected.map(item => item.id)).then(res => {
                          this.$message({
                            type: 'success',
                            message: '删除成功！'
                          })
                          this.$refs?.pageRef?.refreshList()
                        })
                      }).catch(() => {

                      });
                    }
                  })
                ],
              ]
            ]
          }
          return []
        })()
      ]
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [
        {
          name: 'el-input',
          md: 12,
          attributes: {
            disabled: true,
          },
          formItemAttributes: {
            label: '所属商户',
            prop: 'companyWechatName',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 12,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '网点名称',
            prop: 'importWebsitName',
            rules: []
          }
        }, {
          name: 'el-date-picker',
          md: 6,
          attributes: {
            type: "month",
            disabled: this.formEdit,
            'value-format': 'yyyy-MM',
          },
          formItemAttributes: {
            label: '发放月份',
            prop: 'sendMonth',
            rules: [...required]
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '费用类型',
            prop: 'typeName',
            rules: [...required]
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '安装/维修品类',
            prop: 'category',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '维修自编号',
            prop: 'repairCustomCode',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '内机条码',
            prop: 'insideCode',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '内机名称',
            prop: 'insideName',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '基础安装/维修费用',
            prop: 'baseAmount',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '辅材达标',
            prop: 'materialAmount',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '评价数据达标',
            prop: 'appraiseAmount',
            rules: []
          }
        },
        {
          md: 6,
          name: 'slot-component',
          formItemAttributes: {
            label: '合计金额',
            prop: 'totalAmount',
            rules: []
          },
          attributes: {},
          render: (h, { props, onInput }) => {
            return (
              <el-input
                value={Number(this.formData.baseAmount) + Number(this.formData.materialAmount) + Number(this.formData.appraiseAmount)}
                disabled={true}
                size="mini"
                placeholder="请输入"
              ></el-input>
            )
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '工单编号',
            prop: 'orderNo',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '销售单号',
            prop: 'salesOrderNo',
            rules: []
          }
        }, {
          name: 'el-date-picker',
          md: 6,
          attributes: {
            type: "date",
            disabled: this.formEdit,
            'value-format': 'yyyy-MM-dd HH:mm:ss',
          },
          formItemAttributes: {
            label: '安装/维修日期',
            prop: 'workDate',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '销售类型',
            prop: 'salesType',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 12,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '维修内容',
            prop: 'repairContent',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '客户名称',
            prop: 'userName',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '客户电话',
            prop: 'userMobile',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '客户地址',
            prop: 'userAddress',
            rules: []
          }
        }, {
          name: 'el-select',
          options: this.workerList,
          md: 6,
          attributes: {
            disabled: this.formEdit,
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '工程师1名称',
            prop: 'workerId1',
            rules: [...required]
          },
          events: {
            change: (val) => {
              var data = this.workerList.find(item => item.value == val).data
              this.formData.workerName1 = data?.workerName || ""
              this.formData.workerMobile1 = data?.workerMobile || ""
            }
          },
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
          },
          formItemAttributes: {
            label: '工程师1电话',
            prop: 'workerMobile1',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '工程师1结算比例',
            prop: 'workerSettleRate1',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '工程师1结算金额',
            prop: 'workerSettleAmount1',
            rules: []
          }
        }, {
          name: 'el-select',
          options: this.workerList,
          md: 6,
          attributes: {
            disabled: this.formEdit,
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '工程师2名称',
            prop: 'workerId2',
            rules: []
          },
          events: {
            change: (val) => {
              var data = this.workerList.find(item => item.value == val).data
              this.formData.workerName2 = data?.workerName || ""
              this.formData.workerMobile2 = data?.workerMobile || ""
            }
          },
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
          },
          formItemAttributes: {
            label: '工程师2电话',
            prop: 'workerMobile2',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '工程师2结算比例',
            prop: 'workerSettleRate2',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '工程师2结算金额',
            prop: 'workerSettleAmount2',
            rules: []
          }
        }, {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: this.formEdit,
          },
          formItemAttributes: {
            label: '备注',
            prop: 'remark',
            rules: []
          }
        },
      ]
    }
  },
  watch: {
    pageLevel() {
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
    }
  },
  created(){
    if(this.pageCode){
      this.tagStatus = this?.pageCode
    }
  },
  methods: {
    changeType(val) {
			this.$refs.pageRef.refreshList()
		},
    getList1(p, cb) {
      var pam = JSON.parse(JSON.stringify(p))
      try {
        if(this.tagStatus){
          pam.params.push({"param":"a.status","compare":"=","value": this.tagStatus})
        }
        cb && cb(pam)
        return settleExpenseGatherList(pam)
      } catch (err) {
      }
    },
    exportList1: settleExpenseGatherListExport,
    getList2(p, cb) {
      var pam = JSON.parse(JSON.stringify(p))
      try {
        pam.params.push({ "param": "a.settle_expense_id", "compare": "=", "value": this.collectItem.id })
        cb && cb(pam)
        return settleExpenseList(pam)
      } catch (err) {
      }
    },
    exportList2: settleExpenseListExport,
    selectable(row, index) {
      if (this.pageLevel) {
        return this?.collectItem?.status != "YES"
      }
      return !["YES"].includes(Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0])
    },
    operation1() {
      return this.operationBtn({
        detail: {
          click: ({ row, index, column }) => {
            this.collectItem = { ...row }
            this.pageLevel = 1
          }
        },
        summary: {
          conditions: ({ row, index, column }) => {
            return row.status != "YES"
          },
          click: ({ row, index, column }) => {
            this.$prompt('汇总名称', '汇总', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /\S/,
              inputErrorMessage: '名称不能为空'
            }).then(({ value }) => {
              settleExpenseMonthGather({
                ids: [row.id],
                name: value
              }).then(res => {
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                })
                this.$refs?.pageRef?.refreshList()
              })
            }).catch(() => {

            });
          }
        },
        del: {
          prompt: "此操作将永久删除数据, 是否继续?",
          conditions: ({ row, index, column }) => {
            return row.status != "YES"
          },
          click: ({ row, index, column }) => {
            settleExpenseGatherBatchDel([row.id]).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              this.$refs?.pageRef?.refreshList()
            })
          }
        }
      })
    },
    operation2() {
      return this.operationBtn({
        detailEdit: {
          conditions: ({ row, index, column }) => {
            return row.status != "YES"
          },
          click: ({ row, index, column }) => {
            this.formData = { ...row }
            this.formEdit = false
            this.formBool = true
            this.getWorkers()
          }
        },
        detailDel: {
          prompt: "此操作将永久删除数据, 是否继续?",
          conditions: ({ row, index, column }) => {
            return row.status != "YES"
          },
          click: ({ row, index, column }) => {
            settleExpenseBatchDel([row.id]).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              this.$refs?.pageRef?.refreshList()
            })
          }
        },
        details_mx: {
          click: ({ row, index, column }) => {
            this.formData = { ...row }
            this.formEdit = true
            this.formBool = true
            this.getWorkers()
          }
        }
      })
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    handleClose() {
      this.$data.formData = this.$options.data().formData
      this.formBool = false
    },
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          settleExpenseSave({ ...this.formData, settleExpenseId: this.collectItem.id }).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功！'
            })
            this.$refs.pageRef.refreshList()
            this.handleClose()
          })
        }
      })
    },
    getWorkers() {
      memberListPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "b.examine_status", "compare": "=", "value": "OK" }] }).then(res => {
        this.workerList = res.data.records.map(item => {
          var { id, userId, ...data } = item
          return {
            value: userId,
            label: data.nickName,
            data: {
              workerId: userId,
              workerName: data.nickName,
              workerIdcard: data.idCard,
              workerMobile: data.mobile,
              ...data
            }
          }
        })
      })
    }
  }
}
</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>