kd-aiot-frontend-aps/src/views/demandApplication/components/DemandApplicationForm.vue

<template>
  <ele-modal
    :visible.sync="visible"
    :title="title"
    :before-close="cancel"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :maxable="true"
    custom-class="ele-dialog-form demand-application-dialog"
    width="88%"
    append-to-body
  >
    <div v-loading="loading" class="application-form-layout">
      <el-tabs
        v-model="activeTab"
        class="detail-tabs"
        :class="{ 'detail-tabs--form': !readOnly }"
      >
        <el-tab-pane label="申请详情" name="application">
          <div class="form-overview">
            <div class="overview-identity">
              <div class="overview-icon">
                <i
                  :class="readOnly ? 'el-icon-view' : 'el-icon-edit-outline'"
                ></i>
              </div>
              <div>
                <div class="overview-label">{{
                  readOnly ? '申请单详情' : '申请单维护'
                }}</div>
                <div class="overview-code">
                  {{ formData.applyCode || '保存后生成申请编号' }}
                </div>
              </div>
            </div>
            <div class="overview-meta">
              <div class="meta-item meta-item--unit">
                <span class="meta-label">申请单位</span>
                <el-tooltip
                  :content="formData.applyUnitName || '待填写'"
                  placement="top"
                  effect="dark"
                >
                  <span class="meta-value meta-value--unit">{{
                    formData.applyUnitName || '待填写'
                  }}</span>
                </el-tooltip>
              </div>
              <div class="meta-item">
                <span class="meta-label">明细行数</span>
                <span class="meta-value meta-value--number">{{
                  detailCount
                }}</span>
              </div>
              <el-tag
                :type="approvalStatusType(formData.approvalStatus)"
                :class="`overview-status overview-status--${Number(
                  formData.approvalStatus
                )}`"
              >
                <i class="overview-status__dot"></i>
                {{ approvalStatusLabel(formData.approvalStatus) }}
              </el-tag>
            </div>
          </div>

          <section class="form-section basic-section">
            <div class="section-heading">
              <div>
                <div class="section-title">
                  <i class="el-icon-s-order"></i>
                  基础信息
                </div>
                <div class="section-description"
                  >填写申请单位、申请人及单据基础属性</div
                >
              </div>
              <span v-if="!readOnly" class="required-hint">
                <i></i> 标记字段为必填项
              </span>
            </div>

            <el-form
              ref="form"
              :model="formData"
              :rules="rules"
              :disabled="readOnly"
              label-width="140px"
              class="ele-body demand-form"
            >
              <el-row :gutter="24">
                <el-col :lg="8" :md="12" :sm="12" :xs="24">
                  <el-form-item label="申请编号：" prop="applyCode">
                    <el-input
                      v-model.trim="formData.applyCode"
                      size="mini"
                      placeholder="不填写时由后台生成"
                    />
                  </el-form-item>
                </el-col>
                <el-col :lg="8" :md="12" :sm="12" :xs="24">
                  <el-form-item label="申请时间：" prop="applyTime">
                    <el-date-picker
                      v-model="formData.applyTime"
                      type="datetime"
                      size="mini"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="请选择申请时间"
                      class="w100"
                    />
                  </el-form-item>
                </el-col>

                <el-col :lg="8" :md="12" :sm="12" :xs="24">
                  <el-form-item label="申请单位名称：" prop="applyUnitName">
                    <el-input
                      v-model.trim="formData.applyUnitName"
                      disabled
                      size="mini"
                      placeholder="当前登录人所属单位"
                    />
                  </el-form-item>
                </el-col>
                <!-- <el-col :lg="8" :md="12" :sm="12" :xs="24">
              <el-form-item label="申请用户编码：" prop="applyUserCode">
                <el-input
                  v-model.trim="formData.applyUserCode"
                  size="mini"
                  placeholder="请输入申请用户编码"
                />
              </el-form-item>
            </el-col> -->
              </el-row>

              <el-row :gutter="24">
                <el-col :lg="4" :md="12" :sm="12" :xs="24">
                  <el-form-item label="审批状态：">
                    <el-tag :type="approvalStatusType(formData.approvalStatus)">
                      {{ approvalStatusLabel(formData.approvalStatus) }}
                    </el-tag>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="remark">
                    <el-input
                      v-model.trim="formData.remark"
                      type="textarea"
                      :rows="2"
                      maxlength="500"
                      show-word-limit
                      placeholder="请输入备注"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </section>

          <section class="form-section detail-section">
            <div class="section-heading detail-heading">
              <div>
                <div class="section-title">
                  <i class="el-icon-s-grid"></i>
                  需求明细
                  <span class="section-count">{{ detailCount }}</span>
                </div>
                <div class="section-description"
                  >维护物品、数量及期望到货日期</div
                >
              </div>
              <div v-if="!readOnly" class="detail-guide">
                <i class="el-icon-info"></i>
                请先选择物品，仅数量、要求日期和物品类型可修改
              </div>
            </div>

            <ele-pro-table
              ref="detailTable"
              :columns="detailColumns"
              :datasource="formData.detailList"
              :need-page="false"
              :toolbar="!readOnly"
              class="detail-edit-table"
              row-key="_rowKey"
              height="360px"
            >
              <template v-if="!readOnly" v-slot:toolbar>
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-plus"
                  class="ele-btn-icon"
                  @click="addDetail"
                >
                  添加物品明细
                </el-button>
              </template>

              <template v-slot:quantity="{ row }">
                <el-input
                  v-model="row.quantity"
                  :disabled="readOnly"
                  size="mini"
                  inputmode="decimal"
                  placeholder="请输入大于 0 的数量"
                  class="w100"
                  @input="handleQuantityInput($event, row)"
                  @blur="handleQuantityBlur(row)"
                />
              </template>
              <template v-slot:requestDate="{ row }">
                <el-date-picker
                  v-model="row.requestDate"
                  :disabled="readOnly"
                  type="date"
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="必填"
                  class="w100"
                />
              </template>
              <template v-slot:type="{ row }">
                <el-select
                  v-model="row.type"
                  :disabled="readOnly"
                  size="mini"
                  class="w100"
                >
                  <el-option label="默认" :value="0" />
                  <el-option label="工装" :value="1" />
                </el-select>
              </template>
              <template v-slot:action="{ $index }">
                <el-link
                  type="danger"
                  :underline="false"
                  icon="el-icon-delete"
                  @click="removeDetail($index)"
                >
                  删除
                </el-link>
              </template>
            </ele-pro-table>
          </section>
        </el-tab-pane>
        <el-tab-pane v-if="showProcessTab" label="流程详情" name="process" lazy>
          <div class="process-detail-pane">
            <BpmDetail
              v-if="activeTab === 'process'"
              :key="formData.processInstanceId"
              :id="formData.processInstanceId"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <MaterialSelectDialog
      ref="materialSelectDialog"
      @confirm="handleMaterialSelected"
    />

    <div slot="footer" class="dialog-actions">
      <div class="action-hint">
        <i :class="readOnly ? 'el-icon-info' : 'el-icon-circle-check'"></i>
        {{ readOnly ? '当前为只读查看模式' : '保存前请确认需求明细准确无误' }}
      </div>
      <div>
        <el-button
          v-if="!readOnly"
          type="primary"
          icon="el-icon-check"
          :loading="submitting"
          @click="submit"
        >
          保存申请单
        </el-button>
        <el-button @click="cancel">{{ readOnly ? '关闭' : '取消' }}</el-button>
      </div>
    </div>
  </ele-modal>
</template>

<script>
  import {
    getDemandApplicationById,
    saveDemandApplication,
    updateDemandApplication
  } from '@/api/demandApplication';
  import {
    approvalStatusLabel,
    approvalStatusType,
    canModifyApplication,
    createApplicationForm,
    createDetailRow,
    normalizeDateTime
  } from '../constants';
  import BpmDetail from '@/views/bpm/processInstance/detail.vue';
  import MaterialSelectDialog from './MaterialSelectDialog.vue';

  export default {
    name: 'DemandApplicationForm',
    components: {
      BpmDetail,
      MaterialSelectDialog
    },
    data() {
      return {
        visible: false,
        loading: false,
        submitting: false,
        mode: 'add',
        activeTab: 'application',
        formData: createApplicationForm(),
        rules: {
          applyTime: [
            { required: true, message: '请选择申请时间', trigger: 'change' }
          ],
          applyUnitCode: [
            { required: true, message: '请输入申请单位编码', trigger: 'blur' }
          ],
          applyUnitName: [
            { required: true, message: '请输入申请单位名称', trigger: 'blur' }
          ],
          applyUserCode: [
            { required: true, message: '请输入申请用户编码', trigger: 'blur' }
          ]
        }
      };
    },
    computed: {
      readOnly() {
        return this.mode === 'view';
      },
      showProcessTab() {
        return this.readOnly && Boolean(this.formData.processInstanceId);
      },
      title() {
        if (this.mode === 'view') return '查看需求申请单';
        if (this.mode === 'edit') return '修改需求申请单';
        return '新增需求申请单';
      },
      detailCount() {
        return Array.isArray(this.formData.detailList)
          ? this.formData.detailList.length
          : 0;
      },
      detailColumns() {
        return [
          {
            columnKey: 'index',
            type: 'index',
            label: '序号',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          // {
          //   prop: 'lineNumber',
          //   label: '行号',
          //   width: 65,
          //   align: 'center',
          //   fixed: 'left'
          // },
          {
            prop: 'categoryCode',
            label: '物品编码',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            minWidth: 160,
            showOverflowTooltip: true
          },
          // {
          //   prop: 'categoryLevelPath',
          //   label: '分类',
          //   minWidth: 160,
          //   showOverflowTooltip: true
          // },
          {
            prop: 'rootCategoryLevelId',
            label: '根级分类ID',
            minWidth: 135,
            showOverflowTooltip: true
          },
          {
            prop: 'specifications',
            label: '规格',
            minWidth: 130,
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            minWidth: 130,
            showOverflowTooltip: true
          },
          {
            prop: 'quantity',
            label: '申请数量',
            width: 135,
            slot: 'quantity'
          },
          {
            prop: 'unit',
            label: '计量单位',
            width: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'requestDate',
            label: '要求日期',
            width: 165,
            slot: 'requestDate'
          },
          {
            prop: 'type',
            label: '物品类型',
            width: 115,
            slot: 'type'
          },
          !this.readOnly
            ? {
                columnKey: 'action',
                label: '操作',
                width: 80,
                align: 'center',
                fixed: 'right',
                resizable: false,
                slot: 'action'
              }
            : ''
        ].filter(Boolean);
      }
    },
    methods: {
      approvalStatusLabel,
      approvalStatusType,
      async open(mode = 'add', row) {
        if (mode === 'edit' && !canModifyApplication(row)) {
          this.$message.warning('审核中或审核通过的申请单不能修改');
          return;
        }
        this.mode = mode;
        this.activeTab = 'application';
        this.formData = createApplicationForm();
        if (mode === 'add') {
          const userInfo = this.$store.getters.user.info || {};
          this.formData.applyUnitName = userInfo.groupName || '';
          this.formData.applyUnitCode =
            userInfo.groupCode || userInfo.groupId || '';
        }
        this.visible = true;
        this.clearValidate();
        if (!row || !row.id) {
          this.setDetailData(this.formData.detailList);
          return;
        }
        this.loading = true;
        try {
          const data = (await getDemandApplicationById(row.id)) || {};
          const detailList = Array.isArray(data.detailList)
            ? data.detailList.map((item, index) => ({
                ...createDetailRow(index),
                ...item,
                _rowKey: item.id || `${Date.now()}_${index}`,
                lineNumber: item.lineNumber || (index + 1) * 10,
                requestDate: normalizeDateTime(item.requestDate)
              }))
            : [];
          this.formData = {
            ...createApplicationForm(),
            ...data,
            applyTime: normalizeDateTime(data.applyTime),
            processInstanceId:
              data.processInstanceId || row.processInstanceId || '',
            detailList
          };
          this.setDetailData(detailList);
          this.clearValidate();
        } catch (error) {
          this.$message.error(error.message || '申请单详情加载失败');
          this.visible = false;
        } finally {
          this.loading = false;
        }
      },
      clearValidate() {
        this.$nextTick(() => {
          if (this.$refs.form) this.$refs.form.clearValidate();
        });
      },
      setDetailData(list) {
        this.$nextTick(() => {
          if (this.$refs.detailTable) {
            this.$refs.detailTable.setData([...(list || [])]);
          }
        });
      },
      getDetailData() {
        if (this.$refs.detailTable) {
          return this.$refs.detailTable.getData() || [];
        }
        return this.formData.detailList || [];
      },
      addDetail() {
        if (this.$refs.materialSelectDialog) {
          this.$refs.materialSelectDialog.open(this.getDetailData());
        }
      },
      handleMaterialSelected(materials) {
        const list = this.getDetailData();
        const existingIds = new Set(
          list
            .map((item) => item.categoryId)
            .filter(
              (item) => item !== undefined && item !== null && item !== ''
            )
            .map(String)
        );
        const existingCodes = new Set(
          list
            .map((item) => item.categoryCode)
            .filter(Boolean)
            .map(String)
        );
        const additions = (materials || [])
          .filter((item) => {
            const id =
              item.id !== undefined && item.id !== null ? String(item.id) : '';
            const code = item.code ? String(item.code) : '';
            return !existingIds.has(id) && !existingCodes.has(code);
          })
          .map((item, index) => ({
            ...createDetailRow(list.length + index),
            categoryCode: item.code || '',
            categoryId: item.id || '',
            categoryName: item.name || '',
            categoryLevelPath:
              item.categoryLevelPath || item.categoryLevelName || '',
            modelType: item.modelType || '',
            rootCategoryLevelId:
              item.rootCategoryLevelId || item.rootPathIdParent || '',
            specifications: item.specification || item.specifications || '',
            unit: item.measuringUnit || item.unit || ''
          }));
        if (!additions.length) {
          this.$message.warning('所选物料已存在于申请明细中');
          return;
        }
        const result = [...list, ...additions];
        this.reorderDetails(result);
        this.formData.detailList = result;
        this.setDetailData(result);
        this.$message.success('已添加 ' + additions.length + ' 项物料');
      },
      handleQuantityInput(value, row) {
        let quantity = String(
          value === undefined || value === null ? '' : value
        ).replace(/[^\d.]/g, '');
        const dotIndex = quantity.indexOf('.');
        if (dotIndex !== -1) {
          quantity =
            quantity.slice(0, dotIndex + 1) +
            quantity.slice(dotIndex + 1).replace(/\./g, '');
        }
        if (quantity.startsWith('.')) quantity = '0' + quantity;
        quantity = quantity.replace(/^0+(?=\d)/, '');
        row.quantity = quantity;
      },
      handleQuantityBlur(row) {
        const quantity = String(row.quantity || '').replace(/\.$/, '');
        row.quantity = Number(quantity) > 0 ? quantity : 1;
      },
      removeDetail(index) {
        const list = this.getDetailData();
        list.splice(index, 1);
        this.reorderDetails(list);
        this.formData.detailList = [...list];
        this.setDetailData(list);
      },
      reorderDetails(list) {
        list.forEach((item, index) => {
          item.lineNumber = (index + 1) * 10;
        });
      },
      validateDetails(list) {
        if (!list.length) {
          this.$message.warning('请至少添加一条物品明细');
          return false;
        }
        for (let index = 0; index < list.length; index += 1) {
          const item = list[index];
          const rowNumber = index + 1;
          if (!item.categoryCode) {
            this.$message.warning(`第 ${rowNumber} 行：请输入物品编码`);
            return false;
          }
          if (!item.categoryName) {
            this.$message.warning(`第 ${rowNumber} 行：请输入物品名称`);
            return false;
          }
          if (
            item.quantity === '' ||
            item.quantity === null ||
            !/^\d+(\.\d+)?$/.test(String(item.quantity)) ||
            Number(item.quantity) <= 0
          ) {
            this.$message.warning(`第 ${rowNumber} 行：申请数量必须大于 0`);
            return false;
          }
          if (!item.requestDate) {
            this.$message.warning(`第 ${rowNumber} 行：请选择要求日期`);
            return false;
          }
        }
        return true;
      },
      submit() {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return;
          const detailList = this.getDetailData();
          if (!this.validateDetails(detailList)) return;
          this.submitting = true;
          try {
            this.reorderDetails(detailList);
            const payload = this.buildPayload(detailList);
            if (this.formData.id) {
              await updateDemandApplication(payload);
              this.$message.success('修改成功');
            } else {
              await saveDemandApplication(payload);
              this.$message.success('新增成功');
            }
            this.visible = false;
            this.$emit('success');
          } catch (error) {
            this.$message.error(error.message || '保存失败');
          } finally {
            this.submitting = false;
          }
        });
      },
      buildPayload(detailList) {
        const payload = {
          applyCode: this.formData.applyCode,
          applyTime: this.formData.applyTime,
          applyUnitCode: this.formData.applyUnitCode,
          applyUnitName: this.formData.applyUnitName,
          applyUserCode: this.formData.applyUserCode,
          approvalStatus: Number(this.formData.approvalStatus || 0),
          detailList: detailList.map((item, index) => ({
            categoryCode: item.categoryCode,
            categoryId: item.categoryId || null,
            categoryName: item.categoryName,
            categoryLevelPath: item.categoryLevelPath || '',
            lineNumber: (index + 1) * 10,
            modelType: item.modelType,
            quantity: Number(item.quantity),
            requestDate: item.requestDate,
            rootCategoryLevelId: item.rootCategoryLevelId || null,
            specifications: item.specifications,
            type: Number(item.type || 0),
            unit: item.unit
          })),
          processInstanceId: this.formData.processInstanceId || '',
          remark: this.formData.remark,
          type: Number(this.formData.type || 0)
        };
        if (this.formData.id) payload.id = this.formData.id;
        return payload;
      },
      cancel() {
        this.visible = false;
        this.loading = false;
        this.submitting = false;
        this.activeTab = 'application';
        this.formData = createApplicationForm();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .w100 {
    width: 100%;
  }

  .detail-tabs {
    min-height: 420px;
  }

  .process-detail-pane {
    min-height: 500px;
    padding: 2px 0 8px;
    border-radius: 10px;
    background: #f4f7fb;
  }

  ::v-deep .detail-tabs > .el-tabs__header {
    margin: 0 0 14px;
    padding: 0 14px;
    border: 1px solid #dce7f1;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
    box-shadow: 0 4px 12px rgba(31, 45, 61, 0.04);
  }

  ::v-deep .detail-tabs > .el-tabs__header .el-tabs__nav-wrap::after {
    height: 0;
  }

  ::v-deep .detail-tabs > .el-tabs__header .el-tabs__item {
    height: 46px;
    padding: 0 24px;
    color: #60758a;
    font-size: 14px;
    font-weight: 600;
    line-height: 46px;
  }

  ::v-deep .detail-tabs > .el-tabs__header .el-tabs__item:hover {
    color: #1684df;
  }

  ::v-deep .detail-tabs > .el-tabs__header .el-tabs__item.is-active {
    color: #1478c9;
  }

  ::v-deep .detail-tabs > .el-tabs__header .el-tabs__active-bar {
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #1f8ceb 0%, #16b8a6 100%);
  }

  ::v-deep .detail-tabs--form > .el-tabs__header {
    display: none;
  }

  ::v-deep .process-detail-pane .app-container {
    padding: 0 !important;
    background: transparent;
  }

  ::v-deep .process-detail-pane .box-card {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dfe8f1;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(31, 45, 61, 0.05);
  }

  ::v-deep .process-detail-pane .box-card > .el-card__header {
    padding: 14px 18px;
    border-bottom: 1px solid #e5edf5;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
    color: #263f56;
    font-weight: 700;
  }

  .demand-form {
    padding: 4px 0 0;
  }

  .application-form-layout {
    min-height: 420px;
  }

  .form-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    margin-bottom: 12px;
    padding: 11px 16px;
    box-sizing: border-box;
    border: 1px solid #d9e8f5;
    border-radius: 10px;
    background: radial-gradient(
        circle at 92% 0,
        rgba(22, 184, 166, 0.1),
        transparent 30%
      ),
      linear-gradient(105deg, #f2f9ff 0%, #ffffff 64%, #f3fcfa 100%);
  }

  .overview-identity {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .overview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 11px;
    border-radius: 10px;
    background: linear-gradient(145deg, #258fdf 0%, #16a8a0 100%);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 14px rgba(31, 140, 235, 0.2);
  }

  .overview-label {
    color: #708196;
    font-size: 12px;
    line-height: 18px;
  }

  .overview-code {
    overflow: hidden;
    max-width: 360px;
    color: #1d3449;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .overview-meta {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .meta-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 70px;
  }

  .meta-item--unit {
    min-width: 260px;
    max-width: 420px;
  }

  .meta-label {
    color: #98a2b3;
    font-size: 11px;
    line-height: 18px;
  }

  .meta-value {
    overflow: hidden;
    max-width: 180px;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .meta-value--number {
    color: #1478c9;
    font-size: 17px;
  }

  .meta-value--unit {
    overflow: visible;
    max-width: 420px;
    white-space: normal;
    text-align: right;
    word-break: break-all;
    text-overflow: clip;
  }

  .overview-status {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 15px;
    font-weight: 600;
  }

  .overview-status__dot {
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .form-section {
    margin-bottom: 12px;
    padding: 0 14px 10px;
    overflow: hidden;
    border: 1px solid #e1eaf3;
    border-radius: 10px;
    background: #fff;
  }

  .section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 49px;
    margin: 0 -14px 10px;
    padding: 7px 14px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5edf5;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
  }

  .section-title {
    display: flex;
    align-items: center;
    color: #263f56;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
  }

  .section-title > i {
    margin-right: 7px;
    color: #1684df;
    font-size: 15px;
  }

  .section-description {
    margin-left: 22px;
    color: #98a2b3;
    font-size: 11px;
    line-height: 17px;
  }

  .section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 10px;
    background: #e2f2ff;
    color: #1478c9;
    font-size: 12px;
  }

  .required-hint,
  .detail-guide {
    color: #8291a3;
    font-size: 11px;
  }

  .required-hint i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #ef5b5b;
  }

  .detail-guide i {
    margin-right: 4px;
    color: #f59e0b;
  }

  .detail-section {
    padding-bottom: 8px;
  }

  .dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .action-hint {
    color: #78889b;
    font-size: 12px;
  }

  .action-hint i {
    margin-right: 5px;
    color: #16a66a;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }

  ::v-deep .demand-form .el-form-item {
    margin-bottom: 14px;
  }

  ::v-deep .demand-form .el-form-item__label {
    box-sizing: border-box;
    padding-right: 12px;
    color: #53677a;
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    white-space: nowrap;
  }

  ::v-deep .demand-form .el-form-item__content {
    min-width: 0;
    line-height: 28px;
  }

  ::v-deep .demand-form .el-input__inner,
  ::v-deep .demand-form .el-textarea__inner {
    border-color: #dce6f0;
    border-radius: 7px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  ::v-deep .demand-form .el-input__inner:hover,
  ::v-deep .demand-form .el-textarea__inner:hover {
    border-color: #a9cce8;
  }

  ::v-deep .detail-edit-table .ele-pro-table-toolbar {
    min-height: 44px;
    padding: 6px 9px;
    border: 1px solid #dce7f1;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
  }

  ::v-deep .detail-edit-table .el-table {
    border-color: #dce7f1;
    color: #344054;
    font-size: 12px;
  }

  ::v-deep .detail-edit-table .el-table th.el-table__cell {
    height: 42px;
    padding: 6px 0;
    border-bottom-color: #d9e5ef;
    background: linear-gradient(180deg, #f8fbff 0%, #edf4fa 100%);
    color: #2d4458;
    font-weight: 700;
  }

  ::v-deep .detail-edit-table .el-table td.el-table__cell {
    padding: 6px 0;
    border-bottom-color: #edf1f5;
  }

  ::v-deep .detail-edit-table .el-table__row:hover > td.el-table__cell {
    background: #f5faff;
  }

  ::v-deep .detail-edit-table .el-input__inner {
    border-color: #dfe7ef;
    border-radius: 6px;
    background: #fbfdff;
  }

  ::v-deep .detail-edit-table .el-input__inner:focus {
    border-color: #1f8ceb;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(31, 140, 235, 0.08);
  }

  ::v-deep .detail-edit-table .el-button {
    border-radius: 7px;
    font-weight: 600;
  }

  @media (max-width: 1000px) {
    .form-overview {
      align-items: flex-start;
      flex-direction: column;
    }

    .overview-meta {
      width: calc(100% - 51px);
      margin-top: 10px;
      margin-left: 51px;
    }

    .meta-item--unit {
      flex: 1;
      min-width: 0;
    }
  }

  @media (max-width: 768px) {
    ::v-deep .demand-form .el-form-item__label {
      width: 124px !important;
    }

    ::v-deep .demand-form .el-form-item__content {
      margin-left: 124px !important;
    }
  }
</style>

<style lang="scss">
  .demand-application-dialog.el-dialog {
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 12px;
    background: #f3f7fb;
    box-shadow: 0 22px 64px rgba(15, 36, 54, 0.2);

    .el-dialog__header {
      padding: 13px 18px;
      border-bottom: 1px solid #dce7f1;
      background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    }

    .el-dialog__title {
      color: #1d3449;
      font-size: 16px;
      font-weight: 700;
    }

    .el-dialog__body {
      max-height: calc(100vh - 180px);
      padding: 10px 12px;
      overflow: auto;
      background: radial-gradient(
          circle at 12% 0,
          rgba(31, 140, 235, 0.055),
          transparent 24%
        ),
        #f3f7fb;
    }

    .el-dialog__footer {
      padding: 9px 16px;
      border-top: 1px solid #dce7f1;
      background: linear-gradient(180deg, #fbfdff 0%, #f3f7fb 100%);
    }

    .el-dialog__footer .el-button {
      min-width: 88px;
      border-radius: 7px;
      font-weight: 600;
    }

    .el-dialog__footer .el-button--primary {
      border-color: #1684df;
      background: linear-gradient(180deg, #299af0 0%, #1684df 100%);
      box-shadow: 0 4px 10px rgba(31, 140, 235, 0.2);
    }
  }
</style>