系统DVP 基本信息 变更记录 版本下拉框根据变更审批通过次数动态显示下拉选项

src/views/systemDVP/baseInfo/changeRecord/index.vue

@@ -8,20 +8,25 @@
             <!-- 变更版本  -->
             <a-col :lg='8' :md='12' :sm='24' :xl='6' :xs='24'>
               <a-form-item :label="$t('base.info.change-record.change-version')">
-                <a-select 
-                  v-model='formData.changeVersion' 
-                  :placeholder="$t('base.info.change-record.pleace-select-change-version')" 
+                <a-select
+                  v-model='formData.changeVersion'
+                  :placeholder="$t('base.info.change-record.pleace-select-change-version')"
                   allowClear>
-                  <a-select-option value="1">1</a-select-option>
+                    <a-select-option
+                      v-for="option in options"
+                      :key="option.value"
+                      :value="option.value">
+                        {{ option.label }}
+                    </a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <!-- 变更人 -->
             <a-col :lg='8' :md='12' :sm='24' :xl='6' :xs='24'>
               <a-form-item :label="$t('base.info.change-record.change-person')">
-                <a-input 
-                  v-model='formData.changePerson' 
-                  :placeholder="$t('base.info.change-record.pleace-enter-change-person')" 
+                <a-input
+                  v-model='formData.changePerson'
+                  :placeholder="$t('base.info.change-record.pleace-enter-change-person')"
                   allowClear/>
               </a-form-item>
             </a-col>
@@ -50,10 +55,10 @@
             <!-- 变更时间 -->
             <a-col :lg='8' :md='12' :sm='24' :xl='6' :xs='24'>
               <a-form-item :label="$t('base.info.change-record.change-time')">
-                <a-range-picker 
-                  v-model="formData.changeTime" 
-                  allowClear 
-                  style="width: 100%" 
+                <a-range-picker
+                  v-model="formData.changeTime"
+                  allowClear
+                  style="width: 100%"
                   :format="['YYYY-MM-DD', 'YYYY-MM-DD']"
                   @change="handleChangeTime"/>
               </a-form-item>
@@ -98,6 +103,10 @@
           <template slot='index' slot-scope='text, record, index'>
             <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
           </template>
+          <!-- 变更版本 -->
+          <template slot='changeVersion' slot-scope='text, record, index'>
+            <span>{{ '0' + record.changeVersion }}</span>
+          </template>
         </a-table>
       </div>
     </a-col>
@@ -173,6 +182,9 @@ export default {
           dataIndex: 'changeVersion',
           align: 'center',
           width: 200,
+          scopedSlots: {
+            customRender: 'changeVersion'
+          },
           ellipsis: true
         },
         // 变更类型
@@ -244,6 +256,8 @@ export default {
       tableWidth: 0,
       //表格各列宽度总和
       columnsWidth: 0,
+      // 最大版本号
+      maxVersion: undefined
     };
   },
   watch: {
@@ -281,7 +295,17 @@ export default {
       immediate: true
     }
   },
-
+  computed: {  
+    // 使用计算属性生成 变更版本的选项数组
+    options() {  
+      let maxVersion = this.maxVersion;
+      let options = [];
+      for (let i = 1; i <= maxVersion; i++) {
+        options.push({ value: i, label: '0' + i.toString() });
+      }
+      return options;
+    },
+  },
   mounted() {
     this.initData();
     window.onresize = () => {
@@ -360,6 +384,7 @@ export default {
       this.$api.initChangeRecord(data).then( res => {
         if (res.flag) {
           this.tableData = res.data.data;
+          this.maxVersion = this.tableData[0].maxVersion;
           this.pagination.current = res.data.pageNo;
           this.pagination.pageSize = res.data.pageSize;
           this.pagination.total = res.data.total;