cbjsxt-front-master/src/components/costAudit/EstablishmentDialog.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    z-index="8000"
    width="70%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="dialog-content">
      <el-form
        ref="initiationForm"
        :model="formData"
        :rules="establishRules"
        label-width="150px"
        class="initiation-form two-column-form"
        :disabled="type == 2"
      >
        <!-- 成本监审项目名称 -->
        <el-form-item label="成本监审项目名称：" prop="projectName">
          <el-input
            v-model="formData.projectName"
            placeholder="请输入成本监审项目名称"
            style="width: 100%"
            maxlength="30"
          ></el-input>
        </el-form-item>

        <!-- 关联成本监审目录 -->
        <el-form-item label="关联成本监审目录：" prop="catalogId">
          <CatalogCascader
            ref="catalogCascader"
            :form-item="{ placeholder: '请选择监审目录' }"
            style="width: 100%"
            :value="formData.catalogId"
            @change="handleCatalogChange"
          />
        </el-form-item>

        <!-- 监审地区 -->
        <el-form-item label="监审地区：" prop="areaCode">
          <RegionSelector
            :initial-area-code="formData.areaCode"
            :disabled="false"
            @region-change="handleRegionChange"
          ></RegionSelector>
        </el-form-item>

        <!-- 被监审单位 -->
        <el-form-item label="被监审单位:" prop="auditedUnitId">
          <el-select
            v-model="formData.auditedUnitId"
            placeholder="请选择单位"
            clearable
            multiple
            style="width: 76%"
          >
            <el-option
              v-for="unit in areaUnitList"
              :key="unit.unitId"
              :label="unit.unitName"
              :value="unit.unitId"
            />
          </el-select>
          <!-- <el-input
            v-model="formData.auditedUnitName"
            style="width: 70%"
            placeholder="请输入被监审单位"
            readonly
          />
          <el-button type="primary" class="ml10" @click="showUnitDialog = true">
            选择单位
          </el-button>
          <UnitSelectDialog
            :visible.sync="showUnitDialog"
            @unit-selected="handleUnitSelected"
          /> -->
          <el-button
            type="primary"
            class="ml10"
            @click="dialogAddUnitVisible = true"
          >
            新增单位
          </el-button>
        </el-form-item>

        <!-- 监审主体 -->
        <el-form-item label="监审主体：" prop="orgName">
          <el-select
            v-model="formData.orgId"
            placeholder="请选择监审主体"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="Org in OrgList"
              :key="Org.id"
              :label="Org.name"
              :value="Org.id"
            />
          </el-select>
          <!-- <el-input
            v-model="formData.orgName"
            style="width: 76%"
            placeholder="请输入监审主体"
            readonly
          />
          <el-button
            type="primary"
            class="ml10"
            style="width: 22%"
            @click="showOrgDialog = true"
          >
            选择部门
          </el-button>
          <OrgSelectDialog
            :visible.sync="showOrgDialog"
            @org-selected="handleOrgSelected"
          /> -->
        </el-form-item>

        <!-- 归属年度 -->
        <el-form-item label="归属年度：" prop="projectYear">
          <el-date-picker
            v-model="formData.projectYear"
            style="width: 100%"
            type="year"
            placeholder="请选择归属年度"
            format="yyyy"
            value-format="yyyy"
            clearable
          ></el-date-picker>
          <!-- <el-select
            v-model="formData.projectYear"
            placeholder="请选择计划年度"
            style="width: 100%"
          >
            <el-option
              v-for="item in dictData['attributionYear']"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select> -->
        </el-form-item>

        <!-- 立项来源 -->
        <el-form-item label="立项来源：" prop="sourceType">
          <el-select
            v-model="formData.sourceType"
            placeholder="请选择立项类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in dictData['projectProposal']"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 监审形式 -->
        <el-form-item label="监审形式：" prop="auditType">
          <el-select
            v-model="formData.auditType"
            placeholder="请选择监审形式"
            style="width: 100%"
          >
            <el-option
              v-for="item in dictData['auditType']"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 监审期间 -->
        <el-form-item label="监审期间：" prop="auditPeriodArray">
          <div class="cost-period-container">
            <el-button
              type="primary"
              size="small"
              class="add-cost-year-btn"
              @click="addCostYear"
            >
              +
            </el-button>
            <div class="cost-years-wrapper">
              <div
                v-for="(year, index) in formData.auditPeriodArray"
                :key="index"
                class="cost-year-item"
              >
                <el-date-picker
                  v-model="year.value"
                  style="width: 82%"
                  type="year"
                  placeholder="请选择年份"
                  format="yyyy"
                  value-format="yyyy"
                  clearable
                  @change="validateAuditPeriod"
                ></el-date-picker>
                <!-- <el-select
                  v-model="year.value"
                  placeholder="请选择年份"
                  style="width: 80%"
                  @change="validateAuditPeriod"
                >
                  <el-option
                    v-for="item in dictData['attributionYear']"
                    :key="item.key"
                    :label="item.name"
                    :value="item.key"
                  ></el-option>
                </el-select> -->
                <el-button
                  type="danger"
                  size="small"
                  class="delete-cost-year-btn"
                  @click="deleteCostYear(index)"
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </el-form-item>

        <!-- 是否参加听证 -->
        <el-form-item label="是否参加听证：" prop="needHearing">
          <el-radio-group v-model="formData.needHearing">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 是否应急项目 -->
        <el-form-item label="是否应急项目：" prop="isEmergency">
          <el-radio-group v-model="formData.isEmergency">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 立项理由 -->
        <el-form-item label="立项理由：" prop="establishmentReason">
          <el-input
            v-model="formData.establishmentReason"
            type="textarea"
            :rows="4"
            placeholder="请输入立项理由"
            style="width: 100%"
            maxlength="200"
          ></el-input>
        </el-form-item>

        <!-- 立项依据 -->
        <el-form-item label="立项依据：">
          <UploadComponent
            :upload-mode="'multiple'"
            :max-size="50 * 1024 * 1024"
            :allowed-types="['xlsx', 'xls', 'doc', 'docx', 'pdf']"
            :files-list="accordingFileList"
            :is-disabled="type == 2"
            @removeFile="removeAccordingFile"
            @saveFiles="saveAccordingFiles"
          />
        </el-form-item>

        <!-- 其他材料 -->
        <el-form-item label="其他材料：">
          <UploadComponent
            :upload-mode="'multiple'"
            :max-size="50 * 1024 * 1024"
            :allowed-types="['xlsx', 'xls', 'doc', 'docx', 'pdf']"
            :files-list="otherFileList"
            :is-disabled="type == 2"
            @removeFile="removeOtherFile"
            @saveFiles="saveOtherFiles"
          />
        </el-form-item>

        <!-- 监审任务负责人 -->
        <el-form-item label="监审任务负责人：" prop="leaderId">
          <el-select
            v-model="formData.leaderId"
            placeholder="请选择负责人"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in areaUserList"
              :key="index"
              :label="item.fullname"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 监审任务组成员 -->
        <el-form-item label="监审任务组成员：" prop="projectMembers">
          <el-select
            v-model="formData.projectMembers"
            placeholder="请选择成员"
            style="width: 100%"
            multiple
          >
            <el-option
              v-for="(item, index) in areaUserList"
              :key="index"
              :label="item.fullname"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 其他要求 -->
        <el-form-item label="其他专家：" prop="expertStr">
          <el-input
            v-model="formData.expertStr"
            placeholder="请输入其他专家"
            style="width: 100%"
            maxlength="30"
          ></el-input>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <div class="form-buttons">
            <el-button
              v-if="type === 0 || type === 3"
              type="primary"
              @click="handleAdd"
            >
              立项
            </el-button>
            <el-button v-if="type === 1" type="primary" @click="handleSave">
              保存
            </el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增监审单位 -->
    <AuditEntityFormtDialog
      :dialog-visible="dialogAddUnitVisible"
      dialog-title="新增被监审单位"
      @confirm="handleDialogSuccess"
      @update:dialogVisible="dialogAddUnitVisible = $event"
    />
  </el-dialog>
</template>

<script>
  import AuditEntityFormtDialog from '@/components/costAudit/AuditEntityFormtDialog.vue'
  import RegionSelector from '../../views/costAudit/projectInfo/auditProjectManage/annualReviewPlan/RegionSelector.vue'
  import CatalogCascader from '../../views/costAudit/projectInfo/auditProjectManage/annualReviewPlan/CatalogCascader.vue'
  // import OrgSelectDialog from './OrgSelectDialog.vue'
  // import UnitSelectDialog from '@/components/costAudit/UnitSelectDialog.vue'
  import UploadComponent from '@/components/costAudit/UploadComponent.vue'
  import { Message } from 'element-ui'
  import { getAllUnitListByRegionCode } from '@/api/auditEntityManage'
  import {
    addProjectApproval,
    editProjectApproval,
  } from '@/api/auditInitiation'
  import { getAllUserList } from '@/api/uc'
  import { dictMixin } from '@/mixins/useDict'
  import { getDefaultDem, getOrgListByDemId } from '@/api/annualReviewPlan'
  export default {
    name: 'EstablishmentDialog',
    components: {
      RegionSelector,
      CatalogCascader,
      // OrgSelectDialog,
      // UnitSelectDialog,
      UploadComponent,
      AuditEntityFormtDialog,
    },
    mixins: [dictMixin],
    props: {
      title: {
        type: String,
        default: '成本监审立项',
      },
      visible: {
        type: Boolean,
        default: true,
      },
      provinces: {
        type: Array,
        default: () => [],
      },
      initialData: {
        type: Object,
        default: () => ({}),
      },
      //type 0 新建 1编辑 2查看 3快速立项
      type: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        // 用户信息
        userList: [],
        unitList: [],
        OrgList: [],
        showUnitDialog: false, // 选择被监审单位弹窗
        showOrgDialog: false, // 选择监审主体弹窗
        dialogAddUnitVisible: false, // 新增单位弹窗
        accordingFileList: [], // 立项依据文件列表
        otherFileList: [], // 其他材料文件列表
        formData: {
          projectName: '',
          catalogId: '',
          areaCode: '',
          auditedUnitName: '',
          auditedUnitId: [],
          orgId: '',
          orgName: '',
          planYear: '',
          projectYear: '',
          sourceType: '',
          auditPeriod: '',
          auditPeriodArray: [{ value: '' }],
          needHearing: 1,
          isEmergency: 1,
          establishmentReason: '',
          accordingFileUrl: '',
          otherFileUrl: '',
          expertStr: '',
          leaderId: '',
          projectMembers: [],
        },
        dictData: {
          attributionYear: [], // 归属年度
          projectProposal: [], // 立项来源
          auditType: [], //监审形式
        },
        formDistricts: [],
        establishRules: {
          projectName: [
            {
              required: true,
              message: '请输入成本监审项目名称',
              trigger: 'blur',
            },
          ],
          catalogId: [
            {
              required: true,
              message: '请选择关联成本监审目录',
              trigger: 'change',
            },
          ],
          auditedUnitName: [
            { required: true, message: '请选择被监审单位', trigger: 'change' },
          ],
          orgId: [
            { required: true, message: '请选择监审主体', trigger: 'change' },
          ],
          projectYear: [
            { required: true, message: '请选择计划年度', trigger: 'change' },
          ],
          sourceType: [
            { required: true, message: '请选择立项类型', trigger: 'change' },
          ],
          auditType: [
            { required: true, message: '请选择监审形式', trigger: 'change' },
          ],
          areaCode: [
            { required: true, message: '请选择监审地区', trigger: 'change' },
          ],
          auditPeriodArray: [
            {
              required: true,
              validator: this.validateAuditPeriodArray,
              trigger: 'change',
            },
          ],
          leaderId: [
            {
              required: true,
              message: '请选择监审任务负责人',
              trigger: 'change',
            },
          ],
          projectMembers: [
            {
              required: true,
              message: '请选择监审任务组成员',
              trigger: 'change',
            },
          ],
        },
        areaUserList: [],
      }
    },
    computed: {
      areaUnitList() {
        // 过滤出区域单位
        let user = this.$permission.getUserInfo()
        let arr = []
        if (this.$permission.isAdminOrProvince()) {
          // 管理员或省级权限，显示所有数据
          arr = this.unitList
        } else {
          // 非管理员且数据范围为区域时，筛选出当前用户区域下的市区数据
          arr = this.unitList.filter((item) => item.areaLevel >= user.dataScope)
        }
        return arr
      },
    },
    watch: {
      visible(val) {
        // 当弹窗显示时初始化数据
        // type 0 新建 1编辑 2查看 3快速立项
        if (this.type === 1 || this.type === 2) {
          if (val && this.initialData) {
            console.log('this.initialData', this.initialData)
            this.formData = { ...this.formData, ...this.initialData }
            this.formData.needHearing = Number(this.initialData.needHearing)
            this.formData.isEmergency = Number(this.initialData.isEmergency)

            this.formData.projectMembers = this.initialData.projectMembers
              ? this.initialData.projectMembers.split(',')
              : []
            if (this.formData.auditPeriod) {
              this.formData.auditPeriodArray = this.formData.auditPeriod
                .split(',')
                .map((year) => ({ value: year }))
            }
            this.formData.auditedUnitId = this.initialData.auditedUnitId
              ? this.initialData.auditedUnitId.split(',')
              : []
            if (this.initialData.accordingFileUrl) {
              this.accordingFileList =
                this.initialData.accordingFileUrl.split(',')
            }
            if (this.initialData.otherFileUrl) {
              this.otherFileList = this.initialData.otherFileUrl.split(',')
            }
          }
          // 当弹窗关闭时重置表单
          if (!val) {
            this.accordingFileList = []
            this.otherFileList = []
            this.$nextTick(() => {
              if (this.$refs.initiationForm) {
                this.$refs.initiationForm.resetFields()
              }
            })
          }
        } else if (this.type === 3) {
          // 当弹窗显示时设置数据
          if (val && this.initialData) {
            this.formData.projectName = this.initialData.projectName
            this.formData.auditType = this.initialData.auditType
            this.formData.catalogId = this.initialData.catalogId
            this.formData.areaCode = this.initialData.areaCode
            this.formData.auditedUnitName = this.initialData.auditedUnitName
            this.formData.auditedUnitId = this.initialData.auditedUnitId
              ? this.initialData.auditedUnitId.split(',')
              : []
            this.formData.orgId = this.initialData.orgId
            this.formData.planYear = this.initialData.planYear
            if (this.formData.auditPeriod) {
              this.formData.auditPeriodArray = this.initialData.auditPeriod
                .split(',')
                .map((year) => ({ value: year }))
            }
          }
          // 当弹窗关闭时重置表单
          if (!val) {
            this.accordingFileList = []
            this.otherFileList = []
            this.$nextTick(() => {
              if (this.$refs.initiationForm) {
                this.$refs.initiationForm.resetFields()
              }
            })
          }
        } else {
          // 当弹窗显示时初始化数据
          if (val) {
            // this.formData.areaCode = ''
            if (this.$permission.getUserInfo()) {
              let user = this.$permission.getUserInfo()
              if (user.dataScope === 0) {
                this.formData.areaCode = user.provinceCode
              } else if (user.dataScope === 1) {
                this.formData.areaCode = user.cityCode
              } else if (user.dataScope === 2) {
                this.formData.areaCode = user.countyCode
              }
            }
            // 其他初始化逻辑
          }
          // 当弹窗关闭时重置表单
          if (!val) {
            this.accordingFileList = []
            this.otherFileList = []
            this.$nextTick(() => {
              if (this.$refs.initiationForm) {
                this.$refs.initiationForm.resetFields()
              }
            })
          }
        }
      },
      'formData.districtId'(districtId) {
        if (districtId) {
          const district = this.formDistricts.find(
            (item) => item.id === districtId
          )
          if (district) {
            this.formData.district = district.name
          }
        }
      },
      // 监听auditPeriodArray变化，同步更新auditPeriod字符串
      'formData.auditPeriodArray': {
        deep: true,
        handler() {
          this.updateAuditPeriodString()
        },
      },
      // 'formData.areaCode': function(newVal) {
      //   if (newVal) {
      //     const region = this.getRegionByCode(newVal)
      //     if (region) {
      //       this.filterUser(region)
      //     }
      //   }
      // }
    },
    mounted() {
      this.getAllUnitList()
      this.getDefaultDem()
      this.getUser() // 获取用户信息
    },
    methods: {
      getAllUnitList() {
        getAllUnitListByRegionCode().then((res) => {
          this.unitList = res.value || []
          // 过滤掉状态为停用的数据
          this.unitList = this.unitList.filter((item) => item.status == 1)
        })
      },
      // 获取默认维度
      getDefaultDem() {
        getDefaultDem().then((res) => {
          if (res && res.code === 200) {
            const demId = res.value ? res.value.id : null
            if (demId) {
              this.getOrgListByDemId(demId)
            }
          }
        })
      },
      // 根据维度ID获取单位列表
      getOrgListByDemId(demId) {
        getOrgListByDemId({ demId }).then((res) => {
          if (res && res.code === 200) {
            this.OrgList = res.value || []
          }
        })
      },
      // 获取用户信息
      getUser() {
        getAllUserList()
          .then((res) => {
            this.userList = res.value || []
          })
          .catch(() => {})
      },

      // 立项依据文件处理
      saveAccordingFiles(data) {
        this.accordingFileList = data
        // 将所有文件的savePath以逗号分隔的形式保存
        this.formData.accordingFileUrl = data
          .map((file) => file.savePath)
          .filter(Boolean)
          .join(',')
      },

      // 移除立项依据文件（支持单个文件删除）
      removeAccordingFile(index) {
        // 如果传入索引，则删除单个文件
        if (typeof index === 'number') {
          this.accordingFileList.splice(index, 1)
        } else {
          // 否则清空所有文件
          this.accordingFileList = []
        }
        // 更新文件路径字符串
        this.formData.accordingFileUrl = this.accordingFileList
          .map((file) => file.savePath)
          .filter(Boolean)
          .join(',')
      },

      // 其他材料文件处理
      saveOtherFiles(data) {
        this.otherFileList = data
        // 将所有文件的savePath以逗号分隔的形式保存
        this.formData.otherFileUrl = data
          .map((file) => file.savePath)
          .filter(Boolean)
          .join(',')
      },

      // 移除其他材料文件（支持单个文件删除）
      removeOtherFile(index) {
        // 如果传入索引，则删除单个文件
        if (typeof index === 'number') {
          this.otherFileList.splice(index, 1)
        } else {
          // 否则清空所有文件
          this.otherFileList = []
        }
        // 更新文件路径字符串
        this.formData.otherFileUrl = this.otherFileList
          .map((file) => file.savePath)
          .filter(Boolean)
          .join(',')
      },

      // 处理地区选择变化
      handleRegionChange(region) {
        if (region && region.code) {
          this.formData.areaCode = region.code
          // 筛选一下该地区的用户
          this.filterUser(region)
        }
      },
      filterUser(region) {
        if (region.level == 0) {
          this.areaUserList = this.userList.filter(
            (item) => item.provinceCode === region.code
          )
        } else if (region.level == 1) {
          this.areaUserList = this.userList.filter(
            (item) => item.cityCode == region.code
          )
        } else if (region.level == 2) {
          this.areaUserList = this.userList.filter(
            (item) => item.countyCode == region.code
          )
        }
      },

      // 处理监审目录选择后的回调
      handleCatalogChange(value) {
        // this.formData.catalogId = value.join(',')
        this.formData.catalogId = value
      },

      // 处理选择被监审单位后的回调
      handleUnitSelected(selectedUnit) {
        this.formData.auditedUnitId = selectedUnit.unitId
        this.formData.auditedUnitName = selectedUnit.unitName
      },

      // 添加监审年份
      addCostYear() {
        this.formData.auditPeriodArray.push({ value: '' })
      },

      // 删除监审年份
      deleteCostYear(index) {
        // 若只剩1条，禁止删除并提示
        if (this.formData.auditPeriodArray.length <= 1) {
          Message.warning('监审期间至少需保留1条，无法删除')
          return
        }
        this.formData.auditPeriodArray.splice(index, 1)
      },

      // 更新auditPeriod字符串
      updateAuditPeriodString() {
        const values = this.formData.auditPeriodArray
          .map((item) => item.value)
          .filter(Boolean)
        const uniqueValues = [...new Set(values)]
        this.formData.auditPeriod = uniqueValues.join(',')
      },

      // 验证监审期间数组
      validateAuditPeriodArray(rule, value, callback) {
        const hasValidYear = this.formData.auditPeriodArray.some(
          (item) => item.value
        )

        if (!hasValidYear) {
          callback(new Error('请至少选择一个监审年份'))
        } else {
          callback()
        }
      },

      // 验证监审期间
      validateAuditPeriod() {
        this.$refs.initiationForm.validateField('auditPeriodArray')
      },

      // 处理选择监审主体后的回调
      handleOrgSelected(selectedOrg) {
        this.formData.orgId = selectedOrg.id
        this.formData.orgName = selectedOrg.name
      },

      // 保存表单数据
      handleAdd() {
        this.$refs.initiationForm.validate((valid) => {
          if (valid) {
            this.updateAuditPeriodString()
            // 提交数据
            let data = {
              ...this.formData,
              projectMembers: Array.isArray(this.formData.projectMembers)
                ? this.formData.projectMembers.join(',')
                : this.formData.projectMembers || '',
              auditedUnitId: (this.formData.auditedUnitId = Array.isArray(
                this.formData.auditedUnitId
              )
                ? this.formData.auditedUnitId.join(',')
                : this.formData.auditedUnitId || ''),
            }
            addProjectApproval(data)
              .then((res) => {
                Message.success('立项成功')
                this.$emit('save')
              })
              .catch(() => {
                // Message.error('立项失败，请重试')
              })
          }
        })
      },
      handleSave() {
        this.$refs.initiationForm.validate((valid) => {
          if (valid) {
            this.updateAuditPeriodString()
            let data = {
              ...this.formData,
              projectMembers: this.formData.projectMembers.join(','),
              auditedUnitId: this.formData.auditedUnitId.join(','),
            }
            // 提交数据
            editProjectApproval(data)
              .then((res) => {
                Message.success('保存成功')
                this.$emit('save')
              })
              .catch(() => {
                Message.error('保存失败，请重试')
              })
          } else {
            Message.error('请填写完整表单信息')
            return false
          }
        })
      },

      handleCancel() {
        this.$emit('cancel')
      },

      handleClose() {
        this.$emit('close')
      },
      handleDialogSuccess(data, value) {
        this.dialogAddUnitVisible = false
        this.getAllUnitList()
        this.formData.auditedUnitId.push(value)
        this.formData.areaCode = data.areaCode[data.areaCode.length - 1]
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '@/styles/costAudit.scss';
  .form-buttons {
    margin-top: 20px;
    text-align: right;
  }

  .file-item {
    margin-bottom: 8px;
    padding: 4px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }

  .cost-period-container {
    display: flex;
    align-items: flex-start;
  }

  .add-cost-year-btn {
    margin-right: 10px;
  }

  .delete-cost-year-btn {
    margin-left: 10px;
  }

  .cost-years-wrapper {
    flex: 1;
  }

  .cost-year-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .ml10 {
    margin-left: 10px;
  }
  .two-column-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* 特殊处理宽字段，使其跨越两列 */
  .two-column-form .el-form-item.full-width {
    grid-column: span 2;
  }
</style>