1. <template>
    2.   <a-modal
    3.     v-if="visible"  
    4.     :title="title"   // 标题
    5.     :visible="visible" // 对话框是否可见
    6.     @ok="handleOk"    //点击确定回调
    7.     @cancel="handleCancel"  //点击遮罩层或右上角叉或取消按钮的回调
    8.     :width="800"
    9.     :height="900"
    10.     :destoryOnClose="true"  //关闭时销毁 Modal 里的子元素
    11.     :bodyStyle="{ padding: '0px 10px', minHeight: '500px' }"   //Modal body 样式
    12.   >
    13.     <a-tabs default-active-key="1">  
    14.       <a-tab-pane key="1" tab="基本信息" style="padding-left: 10px">  //基本信息tab
    15.         <a-row>
    16.           <a-form-model
    17.             ref="createBatchInfoRef"         //表单DOM实例
    18.             :model="form"                  //表单数据对象
    19.             :labelCol="{ span: 10 }"      //label 标签布局
    20.             :wrapperCol="{ span: 14 }"
    21.             :rules="rules"          // 表单验证规则
    22.           >  // Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可。
    23.             <a-row :gutter="16">
    24.               <a-col :span="12">
    25.                 <a-form-model-item label="种类" prop="frameName">
    26.                   <a-input disabled v-model="form.frameName"></a-input>
    27.                 </a-form-model-item>
    28.               </a-col>
    29.               <a-col :span="12">
    30.                 <a-form-model-item label="图标" prop="icon">
    31.                   <a-select v-model="form.icon">
    32.                     <a-select-option
    33.                       :value="item"
    34.                       :key="index"
    35.                       v-for="(item, index) in schemaIcons"
    36.                     >
    37.                       <a-icon :type="item" style="font-size: 16px" />
    38.                     </a-select-option>
    39.                   </a-select>
    40.                 </a-form-model-item>
    41.               </a-col>
    42.               <a-col :span="12">
    43.                 <a-form-model-item label="编码" prop="prefix">
    44.                   <a-input v-model="form.prefix"></a-input>
    45.                 </a-form-model-item>
    46.               </a-col>
    47.               <a-col :span="12">
    48.                 <a-form-model-item label="元件名称" prop="name">
    49.                   <a-input v-model="form.name"></a-input>
    50.                 </a-form-model-item>
    51.               </a-col>
    52.               <!--如果stockFrameInfo.id===3，也就是容器才触发-->
    53.               <a-col :span="12" v-if="CONTAINER_TYPE === stockFrameInfo.id">
    54.                 <a-form-model-item label="单位" prop="unitId">
    55.                   <a-select
    56.                     @dropdownVisibleChange="dropdownVisibleChange"  //展开下拉菜单的回调
    57.                     v-model="form.unitId"
    58.                     placeholder="请选择"
    59.                   >
    60.                     <a-select-option
    61.                       :key="item.id"
    62.                       :value="item.id"
    63.                       v-for="item in unitOptions"   //拿到数据库中的预选单位
    64.                     >
    65.                       {{ item.unitName }}       
    66.                     </a-select-option>
    67.                     <template v-slot:notFoundContent v-if="spinning">
    68.                       <a-spin :spinning="spinning"></a-spin>
    69.                     </template>
    70.                   </a-select>
    71.                 </a-form-model-item>
    72.               </a-col>
    73.               <a-col :span="12" v-if="CONTAINER_TYPE === stockFrameInfo.id">
    74.                 <a-form-model-item label="容量" prop="capacity">
    75.                   <a-input v-model="form.capacity"></a-input>
    76.                 </a-form-model-item>
    77.               </a-col>
    78.               <a-col
    79.                 :key="item.id"
    80.                 :span="12"
    81.                 v-for="item in stockFrameAttribute"      //根据库位种类id获取的库位种类动态字段信息
    82.               >
    83.                 <a-form-model-item :label="item.paramName" :prop="item.id">
    84.                   // 根据数据类型进行不同的操作
    85.                   <template
    86.                     v-if="
    87.                       paramTypeColumn.text === item.paramType ||      // 10
    88.                       paramTypeColumn.integer === item.paramType ||   // 30
    89.                       paramTypeColumn.float === item.paramType        // 31
    90.                     "
    91.                   >
    92.                     <a-input
    93.                       v-if="item.isMultipleValue === 2"
    94.                       v-model="form[item.id][0]"
    95.                     ></a-input>
    96.                     <a-select
    97.                       v-else
    98.                       v-model="form[item.id]"
    99.                       :dropdownStyle="{ display: 'none' }"
    100.                       :dropdownMenuStyle="{ display: 'none' }"
    101.                       mode="tags"
    102.                     ></a-select>
    103.                   </template>
    104.                   <template
    105.                     v-else-if="paramTypeColumn.textArea === item.paramType"
    106.                   >
    107.                     <a-input
    108.                       :auto-size="{ minRows: 3, maxRows: 5 }"
    109.                       class="default-input"
    110.                       v-model="form[item.id][0]"
    111.                       type="textarea"
    112.                     ></a-input>
    113.                   </template>
    114.                   <template
    115.                     v-else-if="paramTypeColumn.radioSelect === item.paramType"
    116.                   >
    117.                     <a-select v-model="form[item.id][0]">
    118.                       <a-select-option
    119.                         :key="element"
    120.                         v-for="element in item.preDefinedValues"
    121.                       >
    122.                         {{ element }}
    123.                       </a-select-option>
    124.                     </a-select>
    125.                   </template>
    126.                   <template
    127.                     v-else-if="paramTypeColumn.multiSelect === item.paramType"
    128.                   >
    129.                     <a-select mode="multiple" v-model="form[item.id]">
    130.                       <a-select-option
    131.                         :key="element"
    132.                         v-for="element in item.preDefinedValues"
    133.                       >
    134.                         {{ element }}
    135.                       </a-select-option>
    136.                     </a-select>
    137.                   </template>
    138.                   <template v-else-if="paramTypeColumn.time === item.paramType">
    139.                     <a-date-picker
    140.                       v-model="item.paramValues[0]"
    141.                       :showTime="true"
    142.                     ></a-date-picker>
    143.                   </template>
    144.                   <template v-else-if="paramTypeColumn.link === item.paramType">
    145.                     <span
    146.                       class="link-type"
    147.                       :key="ele.referenceId"
    148.                       v-for="ele in item.paramValues"
    149.                       @click="showProductLinkDetail(ele)"
    150.                       ><a-icon type="link" /> {{ ele.referenceName }}</span
    151.                     >
    152.                   </template>
    153.                   <template
    154.                     v-else-if="
    155.                       paramTypeColumn.container === item.paramType &&
    156.                         (CONTAINER_TYPE_HE | CONTAINER_TYPE_BAN) ===
    157.                           stockFrameInfo.id
    158.                     "
    159.                   >
    160.                     <a-select
    161.                       @dropdownVisibleChange="dropdownVisibleChange2"
    162.                       v-model="form[item.id][0]"
    163.                     >
    165.                       // 要加key、value才行
    166.                       <a-select-option
    167.                         :key="element.id"
    168.                         v-for="element in ContainerOptions"
    169.                         :value="element.id"
    170.                       >
    171.                         {{ element.name }}
    172.                       </a-select-option>
    173.                     </a-select>
    174.                   </template>
    175.                 </a-form-model-item>
    176.               </a-col>
    177.             </a-row>
    178.           </a-form-model>
    179.         </a-row>
    180.         <span>元件字段：</span>
    181.         <custom-fields
    182.           @getData="getCustomFieldsData"
    183.           ref="customFieldsRef"
    184.         ></custom-fields>
    185.         <span>库位字段：</span>
    186.         <storage-fields
    187.           ref="storageFieldsRef"
    188.           @getData="getStorageLocationFieldsData"
    189.           :showMode="showMode.productKey"
    190.         >
    191.         </storage-fields>
    192.       </a-tab-pane>
    193.       <a-tab-pane
    194.         key="2"
    195.         tab="规则设置"
    196.         style="padding-left: 10px"
    197.       ></a-tab-pane>    //规则设置tab
    198.     </a-tabs>
    199.   </a-modal>
    200. </template>
    202. <script>
    203. import {
    204.   queryStockFrameFields,
    205.   saveStockSchema,
    206.   queryStockSchemasDetail
    207. } from '@/api/material/locationSetting'  // 引入API接口
    208. import { getFullUnitInfo } from '@/api/system/unit'
    209. import {
    210.   handleValidateCodePlus,
    211.   validateInteger,
    212.   validateFloat,
    213.   validateFloatNumber,
    214.   validateArrRequired
    215. } from '@/common/inspectFunction'   // 引入规则校验函数
    216. import { paramTypeColumn, schemaIcons, VOLUME_TYPE_UNIT } from '@/common/global'
    217. import CustomFields from '@/views/materialcenter/productManagement/components/ProductCustomFields'
    218. import { CUSTOM_FIELD_SHOW_MODE } from '@/views/materialcenter/productManagement/components/comm/constValues'
    220. const CONTAINER_TYPE = '3'
    221. const CONTAINER_TYPE_HE = '2'
    222. const CONTAINER_TYPE_BAN = '4'
    223. export default {
    224.   components: {
    225.     CustomFields,
    226.     StorageFields: CustomFields,
    227.   },
    228.   props: {
    229.     leftSuccess: Function,
    230.     schemaRightSuccess: Function,
    231.   },
    232.   data() {
    233.     return {
    234.       schemaIcons: Object.freeze(schemaIcons),
    235.       source: '',
    236.       stockFrameInfo: {},
    237.       visible: false,
    238.       title: '新建元件',
    239.       paramTypeColumn: Object.freeze(paramTypeColumn), //参数类型
    240.       baseInfo: {
    241.         frameName: '',
    242.         icon: '',
    243.         prefix: '',
    244.         name: '',
    245.         unitId: undefined,
    246.         capacity: undefined,
    247.       },
    248.       form: {
    249.         frameName: '',
    250.         icon: '',
    251.         prefix: '',
    252.         name: '',
    253.         unitId: undefined,
    254.         capacity: undefined,
    255.       },
    256.       rules: {
    257.         prefix: [
    258.           {
    259.             min: 1,
    260.             max: 64,
    261.             required: true,
    262.             message: '编码的长度在1~64位之间',
    263.             trigger: 'change',
    264.           },
    265.           {
    266.             validator: this.handleValidateCodePlus,
    267.             message: '编号格式不正确',
    268.             trigger: 'change',
    269.           },
    270.         ],
    271.         name: [
    272.           {
    273.             min: 1,
    274.             max: 32,
    275.             required: true,
    276.             message: '元件名称的长度在1~32位之间',
    277.             trigger: 'change',
    278.           },
    279.         ],
    280.         capacity: [
    281.           {
    282.             validator: this.validateFloatNumber,
    283.           },
    284.           {
    285.             required: true,
    286.             message: '容量为必填',
    287.             trigger: 'blur',
    288.           },
    289.         ],
    290.         unitId: [
    291.           {
    292.             required: true,
    293.             message: '请填写单位',
    294.             trigger: 'blur',
    295.           },
    296.         ],
    297.       },
    298.       stockFrameAttribute: [],   //库位种类属性
    299.       // 后端需要的paramType
    300.       paramTypeObj: {},
    301.       showMode: Object.freeze(CUSTOM_FIELD_SHOW_MODE),
    302.       customFieldsData: [],
    303.       storageFieldData: [],
    304.       unitOptions: [], // 单位选项
    305.       CONTAINER_TYPE,
    306.       spinning: true,
    307.       CONTAINER_TYPE_HE,
    308.       CONTAINER_TYPE_BAN,
    309.       ContainerOptions: [] //容器选项
    310.     }
    311.   },
    312.   methods: {
    313.     dropdownVisibleChange(open) {
    314.       // this.spinning = true
    315.       open && _.isEmpty(this.unitOptions) && this.getFullUnitInfo()
    316.     },
    318.     /**
    319.      * 获取数据库预选单位
    320.      */
    321.     async getFullUnitInfo() {
    322.       this.spinning = true
    323.       const res = await getFullUnitInfo({
    324.         artifacts: [VOLUME_TYPE_UNIT],
    325.         pageSize: -1,
    326.       }).finally(() => {
    327.         this.spinning = false
    328.       })
    329.       if (res.code === '200') {
    330.         this.unitOptions = res.data
    331.       }
    332.     },
    333.     dropdownVisibleChange2(open) {
    334.       open && _.isEmpty(this.ContainerOptions) && this.getFullContainerInfo()
    335.     },
    336.     /**
    337.      * 获取数据库容器
    338.      */
    339.     async getFullContainerInfo() {
    340.       this.spinning = true
    341.       const res = await queryStockSchemasDetail({
    342.         stockFrameId: '3',
    343.         pageSize: -1
    344.       }).finally(() => {
    345.         this.spinning = false
    346.       })
    347.       if (res.code === '200') {
    348.         this.ContainerOptions = res.data.result
    349.         this.ContainerOptions.forEach(item => {
    350.           this.$set(this.form, item.id, item.name)
    351.         })
    352.       }
    353.     },
    355.     /**
    356.      * 自定义编码规则
    357.      */
    358.     handleValidateCodePlus,
    359.     /**
    360.      * 整数自定义验证
    361.      */
    362.     validateInteger,
    363.     /**
    364.      * 浮点数自定义验证
    365.      */
    366.     validateFloat,
    367.     validateFloatNumber,
    369.     /**
    370.      * 后端给的值是数组
    371.      * 自定义必填
    372.      */
    373.     validateArrRequired,
    374.     /**
    375.      * 动态表单校验
    376.      */
    377.     dynamicValidate(element) {
    378.       // 必填项
    379.       if (element.isRequired === 1) {
    380.         const requiredInfo = [
    381.           { validator: this.validateArrRequired, trigger: 'change' },
    382.           { required: true, message: '必填', trigger: 'change' }
    383.         ]
    384.         !this.rules[element.id] && this.$set(this.rules, element.id, requiredInfo)
    385.         if (this.rules[element.id] && this.rules[element.id].findIndex(item => item.required) < 0) {
    386.           this.rules[element.id].push(...requiredInfo)
    387.         }
    388.         // this.rules[element.id] = [{ required: true, message: '必填', trigger: 'change' }]
    389.       }
    390.       // 整数
    391.       if (element.paramType === this.paramTypeColumn.integer) {
    392.         !this.rules[element.id] &&
    393.           this.$set(this.rules, element.id, [
    394.             { validator: this.validateInteger },
    395.           ])
    396.         this.rules[element.id] &&
    397.           this.rules[element.id].push({
    398.             validator: this.validateInteger,
    399.           })
    400.       }
    401.       // 浮点数
    402.       if (element.paramType === this.paramTypeColumn.float) {
    403.         !this.rules[element.id] &&
    404.           this.$set(this.rules, element.id, [{ validator: this.validateFloat }])
    405.         this.rules[element.id] &&
    406.           this.rules[element.id].push({
    407.             validator: this.validateFloat,
    408.           })
    409.       }
    410.     },
    411.     /**
    412.      * 获取自定义字段数据
    413.      */
    414.     getCustomFieldsData(data) {
    415.       this.customFieldsData = data
    416.     },
    417.     /**
    418.      * 获取元件为库位设置的字段信息
    419.      */
    420.     getStorageLocationFieldsData(data) {
    421.       this.storageFieldData = data
    422.     },
    423.     /**
    424.      * 保存库位元件
    425.      */
    426.     async saveStockSchema(data) {
    427.       const res = await saveStockSchema(data)
    428.       if (res.code === '200') {
    429.         this.judgeCallback()
    430.         this.handleCancel()
    431.       }
    432.     },
    433.     /**
    434.      * 判断需要执行的回调
    435.      */
    436.     judgeCallback() {
    437.       switch (this.source) {
    438.         case 'storageComponentLeft':
    439.           this.leftSuccess(this.stockFrameInfo)
    440.           break
    441.         case 'storageSchemaListRight':
    442.           this.schemaRightSuccess()
    443.           break
    444.         default:
    445.           break
    446.       }
    447.     },
    449.     /**
    450.      * 获取自定义字段和设置字段的数据
    451.      */
    452.     getCustomFieldsDataAndSettingData() {
    453.       this.$refs.customFieldsRef.getData()
    454.       this.$refs.storageFieldsRef.getData()
    455.     },
    457.     /**
    458.      * 获取种类字段数据
    459.      */
    460.     getFrameParams() {
    461.       let targetArr = []
    462.       const target = _.cloneDeep(this.form)
    463.       Object.keys(this.baseInfo).forEach((key) => {
    464.         this.baseInfo[key] = target[key]
    465.         delete target[key]
    466.       })
    467.       Object.keys(target).forEach((key) => {
    468.         targetArr.push({
    469.           id: key,
    470.           paramValues: target[key],
    471.           paramType: this.paramTypeObj[key],
    472.         })
    473.       })
    474.       return targetArr
    475.     },
    477.     /**
    478.      * TODO
    479.      * 模态框确定
    480.      */
    481.     handleOk() {
    482.       this.$refs.createBatchInfoRef.validate((valid) => {
    483.         if (valid) {
    484.           this.getCustomFieldsDataAndSettingData()
    485.           const frameParams = this.getFrameParams()
    486.           this.saveStockSchema({
    487.             ...this.baseInfo,
    488.             frameParams: frameParams,
    489.             customParams: {
    490.               params: this.customFieldsData,
    491.             },
    492.             stockParams: {
    493.               params: this.storageFieldData,
    494.             },
    495.             stockFrameId: this.stockFrameInfo.id,
    496.           })
    497.         }
    498.       })
    499.     },
    500.     /**
    501.      * 模态框取消
    502.      */
    503.     handleCancel() {
    504.       this.visible = false
    505.       this.$refs.createBatchInfoRef.resetFields()
    506.       this.form = {
    507.         frameName: '',
    508.         icon: '',
    509.         prefix: '',
    510.         name: '',
    511.         unitId: undefined,
    512.         capacity: undefined,
    513.       }
    514.       this.stockFrameAttribute = []
    515.     },
    516.     /**
    517.      * 根据库位种类id获取库位种类属性信息
    518.      */
    519.     async queryStockFrameFields(data) {
    520.       const res = await queryStockFrameFields(data)         //根据库位种类id获取库位种类动态字段信息
    521.       if (res.code === '200') {
    522.         this.stockFrameAttribute = res.data                 //存到这里
    523.         this.stockFrameAttribute.forEach((element) => {
    524.           this.paramTypeObj[element.id] = element.paramType        //取出paramType存到paramTypeObj对象;
    525.           this.$set(this.form, element.id, element.paramValues || [])  //向form中添加表单动态字段以便在template中显示
    526.           // 校验规则
    527.           this.dynamicValidate(element)
    528.         })
    529.       }
    530.     },
    531.     /**
    532.      * 打开模态框
    533.      */
    534.     openCreateStockShemaModal(data, source) {
    535.       this.source = source || ''
    536.       this.visible = true
    537.       this.stockFrameInfo = data
    538.       this.form.frameName = this.stockFrameInfo.name   // 位置、盒、容器、板
    539.       this.queryStockFrameFields({ id: this.stockFrameInfo.id })  //id 对应1、2、3、4
    540.     },
    541.   },
    542.   watch: {},
    543. }
    544. </script>
    546. <style lang="scss" scoped>
    547. </style>
    1. const paramTypeColumn = {
    2.   text: 10,
    3.   textArea: 11,
    4.   radioSelect: 20,
    5.   multiSelect: 21,
    6.   integer: 30,
    7.   float: 31,
    8.   time: 40,
    9.   link: 50,
    10.   frame: 51,
    11.   entity: 55,
    12. }

    image.png
    image.png
    添加一个动态表单container：

    1. <template v-else-if="paramTypeColumn.container === item.paramType">
    2.   <a-select v-model="form[item.id][0]">
    3.     <a-select-option :key="element" v-for="element in item.preDefinedValues">
    4.       {{ element }}
    5.     </a-select-option>
    6.   </a-select>
    7. </template>