295 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			295 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <base-model :config="model_cfg">
 | 
						|
    <template slot="dialog-body">
 | 
						|
      <el-form
 | 
						|
        ref="DictionaryTypeConfigForm"
 | 
						|
        :model="form"
 | 
						|
        :rules="rules"
 | 
						|
        size="small"
 | 
						|
        :inline="false"
 | 
						|
      >
 | 
						|
        <el-row :gutter="20">
 | 
						|
          <el-col :span="12">
 | 
						|
            <el-form-item label="字典表模块" prop="ConfigTypeId">
 | 
						|
              <el-select v-model="form.ConfigTypeId" filterable style="width:100%;">
 | 
						|
                <el-option
 | 
						|
                  v-for="(item,index) of basicDicList"
 | 
						|
                  :key="index"
 | 
						|
                  :label="`${item.Code} (${item.Description})`"
 | 
						|
                  :value="item.Id"
 | 
						|
                />
 | 
						|
              </el-select>
 | 
						|
            </el-form-item>
 | 
						|
          </el-col>
 | 
						|
          <el-col :span="12">
 | 
						|
            <el-form-item label="类型" prop="DataTypeEnum">
 | 
						|
              <el-select v-model="form.DataTypeEnum" filterable style="width:100%;">
 | 
						|
                <el-option
 | 
						|
                  :label="`config`"
 | 
						|
                  :value="0"
 | 
						|
                />
 | 
						|
                <el-option
 | 
						|
                  :label="`select`"
 | 
						|
                  :value="1"
 | 
						|
                />
 | 
						|
                <el-option
 | 
						|
                  :label="`enum`"
 | 
						|
                  :value="2"
 | 
						|
                />
 | 
						|
                <el-option
 | 
						|
                  :label="`bool`"
 | 
						|
                  :value="3"
 | 
						|
                />
 | 
						|
              </el-select>
 | 
						|
            </el-form-item>
 | 
						|
          </el-col>
 | 
						|
        </el-row>
 | 
						|
        <el-row :gutter="20">
 | 
						|
          <el-col :span="12">
 | 
						|
            <el-form-item label="字典表名称" prop="Code">
 | 
						|
              <el-input v-model="form.Code" style="width:100%;" />
 | 
						|
            </el-form-item>
 | 
						|
          </el-col>
 | 
						|
          <el-col :span="12">
 | 
						|
            <el-form-item label="描述" prop="Description">
 | 
						|
              <el-input v-model="form.Description" style="width:100%;" />
 | 
						|
            </el-form-item>
 | 
						|
          </el-col>
 | 
						|
        </el-row>
 | 
						|
        <el-row :gutter="20">
 | 
						|
          <el-col :span="12">
 | 
						|
            <el-form-item label="显示顺序" prop="ShowOrder">
 | 
						|
              <el-input-number v-model="form.ShowOrder" :min="0" style="width:100%;" />
 | 
						|
            </el-form-item>
 | 
						|
          </el-col>
 | 
						|
          <el-col :span="12">
 | 
						|
            <el-form-item label="是否可用">
 | 
						|
              <el-switch
 | 
						|
                v-model="form.IsEnable"
 | 
						|
                :active-value="true"
 | 
						|
                :inactive-value="false"
 | 
						|
                style="width:100%;"
 | 
						|
              />
 | 
						|
            </el-form-item>
 | 
						|
          </el-col>
 | 
						|
        </el-row>
 | 
						|
 | 
						|
        <el-table
 | 
						|
          :data="form.ChildList"
 | 
						|
          style="width: 100%"
 | 
						|
          height="300"
 | 
						|
        >
 | 
						|
          <el-table-column
 | 
						|
            prop=""
 | 
						|
            label="字典键值"
 | 
						|
          >
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <el-form-item
 | 
						|
                label=""
 | 
						|
                :prop="`ChildList.${scope.$index}.Code`"
 | 
						|
              >
 | 
						|
                <el-input v-model="scope.row.Code" />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
          <el-table-column
 | 
						|
            prop=""
 | 
						|
            label="中文值"
 | 
						|
          >
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <el-form-item
 | 
						|
                label=""
 | 
						|
                :prop="`ChildList.${scope.$index}.ValueCN`"
 | 
						|
              >
 | 
						|
                <el-input v-model="scope.row.ValueCN" />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
          <el-table-column
 | 
						|
            prop=""
 | 
						|
            label="英文值"
 | 
						|
          >
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <el-form-item
 | 
						|
                label=""
 | 
						|
                :prop="`ChildList.${scope.$index}.Value`"
 | 
						|
              >
 | 
						|
                <el-input v-model="scope.row.Value" />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
          <el-table-column
 | 
						|
            prop=""
 | 
						|
            label="分组"
 | 
						|
          >
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <el-form-item
 | 
						|
                label=""
 | 
						|
                :prop="`ChildList.${scope.$index}.ChildGroup`"
 | 
						|
              >
 | 
						|
                <el-input v-model="scope.row.ChildGroup" />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
          <el-table-column
 | 
						|
            prop=""
 | 
						|
            label="显示顺序"
 | 
						|
          >
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <el-form-item
 | 
						|
                label=""
 | 
						|
                :prop="`ChildList.${scope.$index}.ShowOrder`"
 | 
						|
              >
 | 
						|
                <el-input-number v-model="scope.row.ShowOrder" :min="0" />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
          <el-table-column
 | 
						|
            prop=""
 | 
						|
            label="描述"
 | 
						|
          >
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <el-form-item
 | 
						|
                label=""
 | 
						|
                :prop="`ChildList.${scope.$index}.Description`"
 | 
						|
              >
 | 
						|
                <el-input v-model="scope.row.Description" />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
          <el-table-column
 | 
						|
            prop=""
 | 
						|
            label="是否可用"
 | 
						|
          >
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <el-form-item
 | 
						|
                label=""
 | 
						|
                :prop="`ChildList.${scope.$index}.IsEnable`"
 | 
						|
              >
 | 
						|
                <el-switch
 | 
						|
                  v-model="scope.row.IsEnable"
 | 
						|
                  :active-value="true"
 | 
						|
                  :inactive-value="false"
 | 
						|
                />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
          <el-table-column
 | 
						|
            align="right"
 | 
						|
            width="100"
 | 
						|
          >
 | 
						|
            <template slot="header">
 | 
						|
              <!-- 新增 -->
 | 
						|
              <el-button
 | 
						|
                size="small"
 | 
						|
                type="primary"
 | 
						|
                icon="el-icon-plus"
 | 
						|
                @click="handleAdd"
 | 
						|
              >{{ $t('common:button:new') }}</el-button>
 | 
						|
            </template>
 | 
						|
            <template slot-scope="scope">
 | 
						|
              <!-- 删除 -->
 | 
						|
              <el-button
 | 
						|
                size="mini"
 | 
						|
                type="text"
 | 
						|
                icon="el-icon-delete"
 | 
						|
                @click="handleDelete(scope.$index)"
 | 
						|
              >{{ $t('common:button:delete') }}</el-button>
 | 
						|
            </template>
 | 
						|
          </el-table-column>
 | 
						|
        </el-table>
 | 
						|
      </el-form>
 | 
						|
    </template>
 | 
						|
    <template slot="dialog-footer">
 | 
						|
      <el-button :disabled="btnLoading" size="small" type="primary" @click="handleCancle">Cancel</el-button>
 | 
						|
      <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">Save</el-button>
 | 
						|
    </template>
 | 
						|
  </base-model>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import { addBasicDicAndChild } from '@/api/dictionary'
 | 
						|
import BaseModel from '@/components/BaseModel'
 | 
						|
const formDataDefault = () => {
 | 
						|
  return {
 | 
						|
    ConfigTypeId: null,
 | 
						|
    IsEnable: true,
 | 
						|
    Code: null,
 | 
						|
    ShowOrder: null,
 | 
						|
    Description: null,
 | 
						|
    DataTypeEnum: null,
 | 
						|
    ChildList: []
 | 
						|
  }
 | 
						|
}
 | 
						|
export default {
 | 
						|
  name: 'AnonymizationFrom',
 | 
						|
  components: { BaseModel },
 | 
						|
  props: {
 | 
						|
    basicDicList: {
 | 
						|
      type: Array,
 | 
						|
      default() {
 | 
						|
        return []
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      btnLoading: false,
 | 
						|
      form: formDataDefault(),
 | 
						|
      rules: {
 | 
						|
        ConfigTypeId: [{ required: true, message: 'Please specify', trigger: ['change', 'blur'] }],
 | 
						|
        Code: [{ required: true, message: 'Please specify', trigger: ['change', 'blur'] }],
 | 
						|
        DataTypeEnum: [{ required: true, message: 'Please specify', trigger: ['change', 'blur'] }]
 | 
						|
      },
 | 
						|
      model_cfg: { visible: false, showClose: true, width: '1200px', title: '', appendToBody: true }
 | 
						|
    }
 | 
						|
  },
 | 
						|
  mounted() {
 | 
						|
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    openDialog(title, data) {
 | 
						|
      this.model_cfg.visible = true
 | 
						|
      this.model_cfg.title = title
 | 
						|
      this.form = formDataDefault()
 | 
						|
    },
 | 
						|
    handleSave() {
 | 
						|
      this.$refs.DictionaryTypeConfigForm.validate(valid => {
 | 
						|
        if (valid) {
 | 
						|
          this.btnLoading = true
 | 
						|
          addBasicDicAndChild(this.form).then(res => {
 | 
						|
            this.btnLoading = false
 | 
						|
            this.$message.success(this.$t('common:message:savedSuccessfully'))
 | 
						|
            this.model_cfg.visible = false
 | 
						|
            this.$emit('getList')
 | 
						|
          }).catch(() => {
 | 
						|
            this.btnLoading = false
 | 
						|
          })
 | 
						|
        }
 | 
						|
      })
 | 
						|
    },
 | 
						|
    handleCancle() {
 | 
						|
      this.model_cfg.visible = false
 | 
						|
    },
 | 
						|
    handleAdd() {
 | 
						|
      this.form.ChildList.push({
 | 
						|
        Code: '',
 | 
						|
        ValueCN: '',
 | 
						|
        Value: '',
 | 
						|
        ChildGroup: '',
 | 
						|
        ShowOrder: 0,
 | 
						|
        Description: '',
 | 
						|
        IsEnable: true
 | 
						|
      })
 | 
						|
    },
 | 
						|
    handleDelete(index) {
 | 
						|
      this.$confirm('是否确认删除?', {
 | 
						|
        type: 'warning',
 | 
						|
        distinguishCancelAndClose: true
 | 
						|
      }).then(() => {
 | 
						|
        this.form.ChildList.splice(index, 1)
 | 
						|
      })
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 |