zfire-newmall-admin/src/views/setting/dataDictionary/index.vue

<template>
  <!-- :exportList="exportList" -->
	<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">
		   <!-- <AddDataDictionary :visible="visible" :item="item" @setVisible="bool => {
		     visible = bool
		     if (!bool && item) {
		       item = null
		     }
		   }
		     " @success="() => {
		   $refs.pageRef.refreshList()
		 }
		   " /> -->
		   <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
		     :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
		     <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
		       <zj-form-module :title="formDialogTitles[formDialogType]" 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="formCancel">取 消</el-button>
		   			<el-button size="mini" type="primary" @click="formConfirm()">确定</el-button>
		     </div>
		   </el-dialog>
		 </template-page>
	</zj-page-container>
</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: ["新增","编辑", "详情"],
	  formDialog: false,
	  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: (...p) => {
                      var [row] = p
                      this.formData = row
                      this.formDialogType = 1
                      this.openForm()
                    }
                  }}
                >
                  编辑
                </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.formDialogType = 0
	  this.openForm()
	},
	openForm() {
	  this.formDialog = true;
	},
	formCancel() {
	  this.$refs.formRef.$refs.inlineForm.clearValidate()
	  this.$data.formData = this.$options.data().formData
	  this.formData.dictType = this.dictType
	  this.formData.dictTypeName = this.dictTypeName
	  this.formDialog = false
	},
	formConfirm() {
	  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.formCancel()
	        this.$refs.pageRef.refreshList()
	      })
	    }
	  })
	},
	// 下载导入模版
	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>