fix(contract-manage): 优化合同管理页面布局及字典数据读取

- 合同文件「批量下载」按钮调整为与标题同排且垂直居中 - 修改内联组件render函数结构及相关样式，统一合同文件和其它附件布局 - 合同格式下拉改为动态读取业务字典contractFormat，保留静态兜底 - 合同类别contractCategory下拉改为业务字典读取，替代硬编码选项 - 表单增加所属组织、签订日期、回款账期、开票周期、结算币种等字段 - 调整字段顺序，完善表单输入限制和控件属性 - 替换部分按钮类型，优化用户交互体验 - 修复detailValue字典映射，显示合同格式标签 - 修正样式`:deep`选择器，解决scoped样式对子组件无效问题
2026-09-09 15:11:53 +08:00
parent 508d73fc0d
commit d187da68d2
2 changed files with 113 additions and 55 deletions
@@ -163,6 +163,17 @@
                />
              </el-select>
            </el-form-item>
+            <el-form-item label="所属组织" prop="organizationName">
+              <el-cascader
+                v-model="organizationCascaderValue"
+                :options="organizationOptions"
+                :props="organizationCascaderProps"
+                placeholder="请选择"
+                clearable
+                filterable
+                @visible-change="visible => visible && loadOrganizationOptions()"
+              />
+            </el-form-item>
            <el-form-item label="甲方" prop="partyA">
              <el-select
                v-model="form.partyA"
@@ -197,6 +208,15 @@
                />
              </el-select>
            </el-form-item>
+            <el-form-item label="签订日期" prop="signDate">
+              <el-date-picker
+                v-model="form.signDate"
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择签订日期"
+              />
+            </el-form-item>
            <el-form-item label="合同期限" prop="startDate">
              <div class="contract-manage-form__date-range">
                <el-date-picker
@@ -216,28 +236,29 @@
                />
              </div>
            </el-form-item>
-            <el-form-item label="所属组织" prop="organizationName">
-              <el-cascader
-                v-model="organizationCascaderValue"
-                :options="organizationOptions"
-                :props="organizationCascaderProps"
-                placeholder="请选择"
-                clearable
-                filterable
-                @visible-change="visible => visible && loadOrganizationOptions()"
-              />
+            <el-form-item label="回款账期">
+              <el-input
+                v-model="form.paymentDays"
+                placeholder="请输入"
+                @input="value => integerInput('paymentDays', value)"
+              ><template #suffix>天</template></el-input>
            </el-form-item>
-            <el-form-item label="经办人">
-              <el-input v-model="form.handlerUserName" disabled />
+            <el-form-item label="开票周期">
+              <el-input
+                v-model="form.invoiceCycle"
+                placeholder="请输入"
+                @input="value => positiveIntegerInput('invoiceCycle', value)"
+              ><template #suffix>天</template></el-input>
            </el-form-item>
-            <el-form-item label="签订日期" prop="signDate">
-              <el-date-picker
-                v-model="form.signDate"
-                type="date"
-                format="YYYY-MM-DD"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择签订日期"
-              />
+            <el-form-item label="结算币种" prop="settlementCurrency">
+              <el-select v-model="form.settlementCurrency" placeholder="请选择结算币种" clearable>
+                <el-option
+                  v-for="item in settlementCurrencyOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
            </el-form-item>
            <el-form-item label="合同格式" prop="contractFormat">
              <el-select v-model="form.contractFormat" placeholder="请选择合同格式">
@@ -249,28 +270,18 @@
                />
              </el-select>
            </el-form-item>
-            <el-form-item label="是否需要加盖法人章" prop="legalSealFlag">
-              <el-select v-model="form.legalSealFlag" placeholder="请选择">
-                <el-option label="否" :value="0" />
-                <el-option label="是" :value="1" />
-              </el-select>
-            </el-form-item>
            <el-form-item label="一式">
              <el-input
                v-model="form.copyCount"
                placeholder="请输入"
                @input="value => integerInput('copyCount', value)"
-                ><template #suffix>份</template></el-input
+              ><template #suffix>份</template></el-input
              >
            </el-form-item>
-            <el-form-item label="结算币种" prop="settlementCurrency">
-              <el-select v-model="form.settlementCurrency" placeholder="请选择结算币种" clearable>
-                <el-option
-                  v-for="item in settlementCurrencyOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+            <el-form-item label="是否需要加盖法人章" prop="legalSealFlag">
+              <el-select v-model="form.legalSealFlag" placeholder="请选择">
+                <el-option label="否" :value="0" />
+                <el-option label="是" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="结算方式" prop="settlementMode">
@@ -283,19 +294,8 @@
                />
              </el-select>
            </el-form-item>
-            <el-form-item label="开票周期">
-              <el-input
-                v-model="form.invoiceCycle"
-                placeholder="请输入"
-                @input="value => positiveIntegerInput('invoiceCycle', value)"
-              ><template #suffix>天</template></el-input>
-            </el-form-item>
-            <el-form-item label="回款账期">
-              <el-input
-                v-model="form.paymentDays"
-                placeholder="请输入"
-                @input="value => integerInput('paymentDays', value)"
-              ><template #suffix>天</template></el-input>
+            <el-form-item label="经办人">
+              <el-input v-model="form.handlerUserName" disabled />
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="remark" class="contract-manage-form__remark">
@@ -431,7 +431,7 @@
                <el-icon style="margin-left: 4px; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
              </el-tooltip>
            </div>
-            <el-button type="primary" plain @click="addPaymentRatio">添加</el-button>
+            <el-button type="primary" @click="addPaymentRatio">添加</el-button>
          </div>
          <el-table :data="paymentRatioRows" border>
            <el-table-column type="index" label="序号" width="80" align="center" />
@@ -1170,8 +1170,8 @@ const AttachmentSection = defineComponent({
        class: 'contract-manage-form__section contract-manage-form__section--panel',
      },
      [
-        h('div', { class: 'dialog-section-title' }, this.title),
        h('div', { class: 'contract-manage-form__attachment-head' }, [
+          h('div', { class: 'dialog-section-title' }, this.title),
          h(
            ElButton,
            { type: 'primary', disabled: !this.rows.length, onClick: this.batchDownload },
@@ -1270,6 +1270,8 @@ export default {
      selectedProjectId: '',
      settlementCurrencyOptions: [],
      settlementModeDictOptions: [],
+      contractFormatDictOptions: [],
+      contractCategoryDictOptions: [],
      contractPartyAOptions: [],
      contractPartyBOptions: [],
      contractPartyLoading: false,
@@ -1358,7 +1360,9 @@ export default {
      return this.selectionList.map(item => item.id).join(',');
    },
    contractCategoryOptions() {
-      return this.columnOptions('contractCategory');
+      return this.contractCategoryDictOptions.length
+        ? this.contractCategoryDictOptions
+        : this.columnOptions('contractCategory');
    },
    signTypeOptions() {
      return this.columnOptions('signType');
@@ -1372,7 +1376,9 @@ export default {
        : this.columnOptions('settlementMode');
    },
    contractFormatOptions() {
-      return this.columnOptions('contractFormat');
+      return this.contractFormatDictOptions.length
+        ? this.contractFormatDictOptions
+        : this.columnOptions('contractFormat');
    },
    organizationCascaderProps() {
      return {
@@ -1822,7 +1828,9 @@ export default {
      Promise.all([
        getSystemDictionary({ code: 'currency_type' }),
        getBizDictionary({ code: 'settle_method' }),
-      ]).then(([currencyRes, methodRes]) => {
+        getBizDictionary({ code: 'contractFormat' }),
+        getBizDictionary({ code: 'contractCategory' }),
+      ]).then(([currencyRes, methodRes, formatRes, categoryRes]) => {
        const records = response => {
          const data = response?.data?.data || response?.data || [];
          return Array.isArray(data) ? data : data.records || [];
@@ -1835,10 +1843,26 @@ export default {
          label: item.dictValue,
          value: item.dictKey,
        }));
+        this.contractFormatDictOptions = records(formatRes).map(item => ({
+          label: item.dictValue,
+          value: item.dictKey,
+        }));
+        this.contractCategoryDictOptions = records(categoryRes).map(item => ({
+          label: item.dictValue,
+          value: item.dictKey,
+        }));
        ['settlementMode'].forEach(prop => {
          const column = this.findColumn(this.tableOption.column, prop);
          if (column) column.dicData = this.settlementModeDictOptions;
        });
+        const formatColumn = this.findColumn(this.tableOption.column, 'contractFormat');
+        if (formatColumn && this.contractFormatDictOptions.length) {
+          formatColumn.dicData = this.contractFormatDictOptions;
+        }
+        const categoryColumn = this.findColumn(this.tableOption.column, 'contractCategory');
+        if (categoryColumn && this.contractCategoryDictOptions.length) {
+          categoryColumn.dicData = this.contractCategoryDictOptions;
+        }
      });
    },
    syncCurrentProjectOption() {
@@ -2428,7 +2452,8 @@ export default {
        prop === 'approvalStatus' ||
        prop === 'contractCategory' ||
        prop === 'signType' ||
-        prop === 'effectiveType'
+        prop === 'effectiveType' ||
+        prop === 'contractFormat'
      ) {
        return this.displayStatus(this.detailRow, prop);
      }
@@ -2819,8 +2844,13 @@ export default {
 :deep(.contract-manage-form__attachment-head) {
  display: flex;
  align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
  margin-bottom: 16px;
+
+  // 标题与「批量下载」按钮同排、垂直居中，消除标题自身下边距
+  .dialog-section-title {
+    margin-bottom: 0;
+  }
 }

 :deep(.contract-manage-form__attachment-upload) {