Pārlūkot izejas kodu

feat(forecast-form): 添加年份和月份控件的禁用逻辑及插槽支持

yz 3 dienas atpakaļ
vecāks
revīzija
0570d07621

+ 1 - 0
src/api/forecast/types.d.ts

@@ -1,5 +1,6 @@
 // Forecast 模块类型定义
 import { ApprovalStatus } from "@/constants/forecast"
+import type { AxiosResponse } from "axios"
 
 // 基础查询参数
 export interface ForecastQueryParams {

+ 11 - 0
src/components/forecast-form/forecast-form-mixin.js

@@ -971,6 +971,17 @@ export default {
         } else {
           const msg = (res && res.data && (res.data.msg || res.data.message)) || '提交失败'
         //   this.$message && this.$message.error(msg)
+          // 提交业务失败时,解禁年份与月份两个表单项(直接操作 $refs)
+          if (typeof this.setYearMonthDisabled === 'function') {
+            this.setYearMonthDisabled(false)
+          } else if (this.$refs) {
+            this.$nextTick(() => {
+              try {
+                if (this.$refs.yearPicker) this.$refs.yearPicker.disabled = false
+                if (this.$refs.monthSelect) this.$refs.monthSelect.disabled = false
+              } catch (e) { /* 忽略 */ }
+            })
+          }
           // 通知父组件:提交失败(业务失败)
           this.$emit && this.$emit(FORECAST_FORM_EVENTS.SUBMIT_ERROR, { message: msg, response: res })
         }

+ 2 - 0
src/components/forecast-form/form-option.js

@@ -64,6 +64,7 @@ export const forecastFormOption = {
           prop: 'year',
           type: 'year',
           span: 12,
+          slot: true,
           placeholder: '请选择年份',
           valueFormat: 'yyyy',
           rules: [{
@@ -77,6 +78,7 @@ export const forecastFormOption = {
           prop: 'month',
           type: 'select',
           span: 12,
+          slot: true,
           placeholder: '请选择月份',
           dicData: MONTH_OPTIONS,
           rules: [{

+ 60 - 0
src/components/forecast-form/index.vue

@@ -20,6 +20,35 @@
               @customer-selected="handleCustomerSelected"
             />
           </template>
+
+          <!-- 预测年份插槽(使用 $refs.yearPicker 控制禁用) -->
+          <template #year>
+            <el-date-picker
+              ref="yearPicker"
+              v-model="formData.year"
+              type="year"
+              value-format="yyyy"
+              placeholder="请选择年份"
+              style="width: 100%"
+            />
+          </template>
+
+          <!-- 预测月份插槽(使用 $refs.monthSelect 控制禁用) -->
+          <template #month="{ column }">
+            <el-select
+              ref="monthSelect"
+              v-model="formData.month"
+              placeholder="请选择月份"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="opt in (column && column.dicData) ? column.dicData : []"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+          </template>
         </avue-form>
 
         <!-- 物料表格区域 -->
@@ -133,6 +162,37 @@ export default {
    */
   components: {
     CustomerSelect
+  },
+
+  /**
+   * @this {import('./types').ForecastFormMixinComponent & Vue}
+   */
+  mounted() {
+    // 在编辑态,初始禁用“年份/月份”两个控件(通过 $refs 设置)
+    this.$nextTick(() => {
+      try {
+        if (this.isEdit) {
+          if (this.$refs.yearPicker) this.$refs.yearPicker.disabled = true
+          if (this.$refs.monthSelect) this.$refs.monthSelect.disabled = true
+        }
+      } catch (e) {
+        // 忽略可能的非关键性异常
+      }
+    })
+  },
+
+  methods: {
+    // 通过 $refs 统一设置“年份/月份”的禁用状态
+    setYearMonthDisabled(disabled) {
+      this.$nextTick(() => {
+        try {
+          if (this.$refs.yearPicker) this.$refs.yearPicker.disabled = disabled
+          if (this.$refs.monthSelect) this.$refs.monthSelect.disabled = disabled
+        } catch (e) {
+          // 忽略可能的非关键性异常
+        }
+      })
+    }
   }
 }
 </script>