jsm-mall-front/src/views/setting/dataDictionary/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: 'hidden'
        }"
      >
        <zj-page-container direction="row">
          <div class="catalogue">
            <div class="title">类型名称</div>
            <zj-page-container>
              <zj-page-fill>
                <el-tree
                  :data="typeList"
                  :props="defaultProps"
                  default-expand-all
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  @node-click="handleNodeClick"
                  current-node-key="ASSIST_UNIT"
                  node-key="dictType"
                  ref="listTree"
                >
                </el-tree>
              </zj-page-fill>
            </zj-page-container>
          </div>
          <template-page
            ref="pageRef"
            :getList="getList"
            :columnParsing="columnParsing"
            :optionsEvensGroup="optionsEvensGroup"
            :tableAttributes="tableAttributes"
            :tableEvents="tableEvents"
            :operationColumnWidth="160"
            :operation="operation()"
            :exportList="exportList"
          >
          </template-page>
        </zj-page-container>
      </div>
      <div v-if="~['add', 'detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
          <zj-form-module
            :title="data.label"
            label-width="100px"
            :showPackUp="false"
            :form-data="formData"
            :form-items="formItems"
            :disabled="formDialogType == 2"
          >
          </zj-form-module>
        </zj-form-container>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="data.removeTab()">取 消</el-button>
          <el-button size="mini" type="primary" @click="formConfirm(data.removeTab)">确定</el-button>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import AddDataDictionary from './addDataDictionary.vue'
import import_mixin from '@/components/template/import_mixin.js'
import { required } from '@/components/template/rules_verify.js'
import { commonTemplateDownload } from '@/api/common.js'
import {
  getType,
  getDataDictionaryExport,
  getDataDictionary,
  add,
  edit,
  del,
  getDetail,
  listImport
} from '@/api/dataDictionary.js'
export default {
  components: {
    TemplatePage,
    AddDataDictionary
  },
  mixins: [import_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: this.addData
            }
          ]
        ],
        [
          [
            {
              name: '下载导入模板',
              click: this.handleDownload
            }
          ],
          [
            {
              name: '导入模板',
              render: () => {
                return this.importButton(listImport, '导入模板')
              }
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {},
      // 表格事件
      tableEvents: {},
      visible: false,
      item: null,
      dictType: 'ASSIST_UNIT',
      dictTypeName: '辅材单位',
      typeList: [],
      defaultProps: {
        children: '',
        label: 'remark'
      },
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ['新增', '编辑', '详情'],
      formData: {
        companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
        dictType: 'ASSIST_UNIT',
        dictTypeName: '辅材单位',
        dictValue: '',
        status: 'ON',
        sortNum: '',
        remark: ''
      }
    }
  },
  created() {
    this.getType()
  },
  computed: {
    formItems() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: {
            label: '所属商户',
            prop: 'companyName',
            rules: [...required]
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: {
            label: '类型名称',
            prop: 'dictTypeName',
            rules: [...required]
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入' },
          formItemAttributes: {
            label: '字典值',
            prop: 'dictValue',
            rules: [...required]
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          attributes: {},
          formItemAttributes: {
            label: '状态',
            prop: 'status',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <el-radio-group v-model={this.formData.status}>
                <el-radio disabled={this.formDialogType == 2} label="ON">
                  启用
                </el-radio>
                <el-radio disabled={this.formDialogType == 2} label="OFF">
                  禁用
                </el-radio>
              </el-radio-group>
            )
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入' },
          formItemAttributes: {
            label: '排序',
            prop: 'sortNum',
            rules: []
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入备注内容', type: 'textarea', rows: 3 },
          formItemAttributes: {
            label: '备注',
            prop: 'remark',
            rules: []
          }
        }
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList(p) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        if (this.dictType) {
          pam.params.push({ param: 'a.dict_type', compare: '=', value: this.dictType })
        }
        return getDataDictionary(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    exportList: getDataDictionaryExport,
    getType() {
      getType().then(res => {
        this.typeList = res.data
        this.$refs.pageRef.refreshList()
      })
    },
    handleNodeClick(e) {
      this.dictType = e.dictType
      this.formData.dictType = e.dictType
      this.formData.dictTypeName = e.remark
      this.dictTypeName = e.remark
      this.$refs.pageRef.refreshList()
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    operation() {
      if (true) {
        return (h, { row, index, column }) => {
          return (
            <div class="operation-btns">
              {true ? (
                <zj-button
                  useLoading={false}
                  parameter={[row]}
                  buttonAttributes={{
                    size: 'mini',
                    type: 'primary'
                  }}
                  buttonEvents={{
                    click: row => {
                      this.$refs.tabPage.addTab({
                        // 对应显示的模块
                        activeKey: 'detail',
                        // 唯一标识
                        key: 'detail',
                        // 页签名称
                        label: '编辑',
                        // 打开时事件
                        triggerEvent: () => {
                          this.formCancel()
                          this.formDialogType = 1
                          this.$nextTick(() => {
                            this.formData = row
                          })
                        },
                        // 关闭时事件
                        closeEvent: () => {}
                      })
                    }
                  }}
                >
                  编辑
                </zj-button>
              ) : null}
              {true ? (
                <el-popconfirm
                  icon="el-icon-info"
                  icon-color="red"
                  title="这是一段内容确定删除吗？"
                  onConfirm={() => {
                    del({ id: row.sysDictId })
                      .then(res => {
                        this.$refs.pageRef.refreshList()
                        this.$message({
                          type: 'success',
                          message: `删除成功!`
                        })
                      })
                      .catch(err => {
                        console.log(err)
                      })
                  }}
                >
                  <zj-button
                    slot="reference"
                    buttonAttributes={{
                      size: 'mini',
                      type: 'danger'
                    }}
                  >
                    删除
                  </zj-button>
                </el-popconfirm>
              ) : null}
            </div>
          )
        }
      }
      return undefined
    },
    addData() {
      this.$refs.tabPage.addTab({
        // 对应显示的模块
        activeKey: 'add',
        // 唯一标识
        key: 'add',
        // 页签名称
        label: '新增',
        // 打开时事件
        triggerEvent: () => {
          this.formCancel()
          this.formDialogType = 0
        },
        // 关闭时事件
        closeEvent: () => {}
      })
    },
    formCancel() {
      this.$refs?.formRef?.$refs?.inlineForm?.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formData.dictType = this.dictType
      this.formData.dictTypeName = this.dictTypeName
    },
    formConfirm(removeTab) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ;[add, edit][this.formDialogType](this.formData).then(res => {
            this.$message({
              type: 'success',
              message: this.formDialogTitles[this.formDialogType] + `成功!`
            })
            this.$refs.pageRef.refreshList()
            removeTab('list')
          })
        }
      })
    },
    // 下载导入模版
    handleDownload() {
      commonTemplateDownload({ name: '数据字典导入.xlsx' }, `${this.$route.meta.title}`)
        .then(res => {
          this.$message({
            message: '下载成功',
            type: 'success'
          })
        })
        .catch(err => {
          this.$message.error('下载失败')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 120px;
  margin: 24px 0 20px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  font-weight: bold;
}
</style>