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>
 |