jsm-mall-front/src/views/userManagement/masterGroup/index.vue

<template>
  <template-page
    v-if="pageShow"
    ref="pageRef"
    :get-list="getList"
    :exportList="exportList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :operation="operation()"
    key="pageType"
  >
    <div class="cartographer_big">
      <el-dialog
        title="设置师傅组别"
        width="100%"
        :modal="false"
        :visible.sync="formDialog"
        :before-close="handleClose"
      >
        <zj-page-container>
          <zj-page-fill>
            <div style="box-sizing: border-box; padding: 20px 20px 0 20px">
              <zj-form-container ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
                <zj-form-module title="师傅组" label-width="100px" :form-data="formData" :form-items="formItems">
                </zj-form-module>
              </zj-form-container>
            </div>
          </zj-page-fill>
          <div style="text-align: right; box-sizing: border-box; padding: 16px 20px">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button size="mini" type="primary" @click="save">保存</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 {
  workerTeamList,
  workerTeamListExport,
  workerTeamAdd,
  workerTeamUpdate,
  workerTeamImport,
  workerTeamQueryWebsitWorker
} from '@/api/masterGroup.js'
import { commonTemplateDownload } from '@/api/common.js'
import { getWebsit } from '@/api/customerManagement.js'
import { required, requiredValueMin } from '@/components/template/rules_verify.js'
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      pageType: 'list',
      pageShow: true,
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialog: false,
      formData: {
        assistantWorkerId: '',
        assistantWorkerName: '',
        companyWechatId: '',
        companyWechatName: '',
        masterWorkerId: '',
        masterWorkerName: '',
        status: '',
        websitId: ''
      },
      websitList: [],
      workerTeamQueryWebsitWorkerList: []
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: this.openForm
            })
          ]
        ],
        [
          [
            this.optionsEvensAuth('import', ({ moduleName }) => {
              return {
                name: moduleName,
                render: () => {
                  return this.importButton(workerTeamImport, moduleName)
                }
              }
            })
          ],
          [
            this.optionsEvensAuth('template', {
              click: () => {
                commonTemplateDownload({ name: '师傅组队导入模板.xlsx' }, `${this.$route.meta.title}`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            })
          ]
        ]
      ]
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [
        {
          name: 'el-select',
          md: 12,
          options: this.websitList.map(item => ({ label: item.name, value: item.websitId })),
          attributes: {
            clearable: true,
            filterable: true,
            disabled: false,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '所属网点',
            prop: 'websitId',
            rules: [...required]
          },
          events: {
            change: val => {
              this.formData.masterWorkerId = ''
              this.formData.masterWorkerName = ''
              this.formData.assistantWorkerId = ''
              this.formData.assistantWorkerName = ''
              this.workerTeamQueryWebsitWorkerList = []
              if (val) {
                workerTeamQueryWebsitWorker({ websitId: val }).then(res => {
                  this.workerTeamQueryWebsitWorkerList = res.data
                })
              }
            }
          }
        },
        {
          name: 'el-select',
          md: 12,
          options: this.workerTeamQueryWebsitWorkerList
            .filter(item => item.workerId != this.formData.assistantWorkerId)
            .map(item => ({ label: item.workerName, value: item.workerId })),
          attributes: {
            clearable: true,
            filterable: true,
            placeholder: '请输入',
            disabled: !this.formData.websitId
          },
          formItemAttributes: {
            label: '选择大工',
            prop: 'masterWorkerId',
            rules: [...required]
          },
          events: {
            change: val => {
              this.formData.masterWorkerName = this.workerTeamQueryWebsitWorkerList?.find(
                item => item.workerId === val
              )?.workerName
            }
          }
        },
        {
          name: 'el-select',
          md: 12,
          options: this.workerTeamQueryWebsitWorkerList
            .filter(item => item.workerId != this.formData.masterWorkerId)
            .map(item => ({ label: item.workerName, value: item.workerId })),
          attributes: {
            clearable: true,
            filterable: true,
            placeholder: '请输入',
            disabled: !this.formData.masterWorkerId
          },
          formItemAttributes: {
            label: '选择小工',
            prop: 'assistantWorkerId',
            rules: [...required]
          },
          events: {
            change: val => {
              this.formData.assistantWorkerName = this.workerTeamQueryWebsitWorkerList?.find(
                item => item.workerId === val
              )?.workerName
            }
          }
        },
        {
          md: 12,
          isShow: true,
          name: 'el-radio',
          options: [
            { label: '有效', value: 'ON' },
            { label: '无效', value: 'OFF' }
          ],
          attributes: {},
          formItemAttributes: {
            label: '状态',
            prop: 'status',
            rules: [...required]
          }
        }
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList: workerTeamList,
    // 列表导出函数
    exportList: workerTeamListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 打开创建弹窗
    openForm() {
      Promise.all([getWebsit({ type: 'C', status: true })]).then(([res1]) => {
        this.websitList = res1.data
        this.formDialog = true
      })
    },
    // 打开详情弹窗
    openDetailForm(row) {
      Promise.all([
        getWebsit({ type: 'C', status: true }),
        workerTeamQueryWebsitWorker({ websitId: row.websitId })
      ]).then(([res1, res2]) => {
        this.websitList = res1.data
        this.workerTeamQueryWebsitWorkerList = res2.data
        this.formData = { ...row }
        this.formDialog = true
      })
    },
    handleClose() {
      this.$refs?.formRef?.resetFields()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    // 操作按钮
    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.openDetailForm(row)
          }
        }
      })
    },
    // 保存
    save() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ;(this.formData?.id ? workerTeamUpdate : workerTeamAdd)(this.formData).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.handleClose()
            this.$refs.pageRef.refreshList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>