diff --git a/src/views/contract/contractList.vue b/src/views/contract/contractList.vue index 40b31fb..4c8d769 100644 --- a/src/views/contract/contractList.vue +++ b/src/views/contract/contractList.vue @@ -22,7 +22,7 @@ 预算计划 - @@ -140,7 +140,7 @@ - + + + + + + @@ -434,7 +487,9 @@ @on-search="searchBudgets"/>
-
已选择：{{ select.plan_name }}
+ +
已选择：{{ select.plan_name }}
+
已选择：{{ form.plan_display }}
清空选择
@@ -455,39 +510,6 @@ - - - - - - - @@ -519,6 +541,11 @@ import { import { getparameter } from "@/api/system/dictionary" +import { + getContractCategoryTemplateBaseConfig, + getContractCategoryTemplateConfigParams, + getContractFormList +} from '@/api/businessConfig/businessConfig' import { listdeptNoAuth } from "@/api/system/department"; @@ -546,9 +573,9 @@ import paymentRegistration from "./components/paymentRegistration"; import contractSign from "@/views/contract/components/contractSign"; import contractPaymentRegistration from "@/views/contract/components/contractPaymentRegistration"; import govPlane from './components/govPlane.vue'; - import { - download - } from '@/utils/downloadRequest' +import { + download +} from '@/utils/downloadRequest' export default { components: { editor, @@ -556,7 +583,7 @@ export default { paymentRegistration, contractSign, contractPaymentRegistration, - govPlane + govPlane, }, data() { var planPass = (rule, value, callback) => { @@ -654,6 +681,20 @@ export default { left: 0 }, hasEdit: false, + // 添加控制显示/隐藏的变量 + showFields: { + purchaseMethod: true, + projectName: true, + projectType: true, + budgetPrice: true, + fundChannel: true, + budgetPlan: true, + request: true, + purchaseApproval: true, + tenderReview: true, + contractSign: true + }, + planSource: 'search', isShowPlanForSearch: false, options: [{ value: "", @@ -859,17 +900,13 @@ export default { } }, { - label: "资金来源", - width: 120, + label: "资金渠道", + width: 320, + align: "left", customFn: (row) => { - { return row.money_way_detail.map(item => { - return (< div> { - item.value - } < /div>) - }) - } - + return `
${item.value}
` + }).join('') } }, { @@ -877,16 +914,9 @@ export default { width: 320, align: "left", customFn: (row) => { - { return row.plans.map(item => { - return (< div> [{ - item.year - }] - { - item.name - } < /div>) - }) - } - + return `
[${item.year}] - ${item.name}
` + }).join('') } }, { @@ -912,16 +942,7 @@ export default { width: 140, customFn: (row) => { let per = ((((row.fund_log_total) / row.money) || 0) * 100)?.toFixed(2) || 0 - return (< - div style={ - { - 'color': per > 110 ? 'red' : 'green' - } - }> { - per - } % - - ) + return `
${per}%
` } }, { @@ -1014,13 +1035,9 @@ export default { minWidth: 200, prop: "contract_carry_department", customFn: row => { - return ( -
- { row.contract_carry_department.map(i => { - return ({i.carry_department.name}) - }) } -
- ) + return row.contract_carry_department.map(i => { + return `${i.carry_department.name}` + }).join('') } } ], @@ -1132,75 +1149,46 @@ export default { //新增 isShowAdd: false, + currentStep: 1, form: { - name: "", - is_simple:0, - has_charge: 0, - supply: "", - money:0, - type: "", - methods: "", - modality: "", - price: 0, - fundingChannels: [], - isBudget: true, + category: '', + affairType: '', + contractType: '', + purchaseForm: '', + purchaseSubForm: '', + purchaseMethod: '', + name: '', + type: '', // 项目类型 + moneyWay: '', plan: [], - is_substitute: 0, - gov_plane_id: '', - contract_carry_department: [], - }, - plan: [], - rules: { - name: [{ - required: true, - message: "必填" - }], - supply:[ - { - validator:supplyPass, - trigger: 'change' - } - ], - money:[ - { - validator:moneyPass, - trigger: 'change' - } - ], - type:[ - { - validator: typePass, - trigger: 'change' - } - ], - methods:[ - { - validator:methodsPass, - trigger: 'change' - } - ], - modality:[ - { - validator:modalityPass, - trigger: 'change' - } - ], - price:[ + plan_display: '', // 预算计划显示文本 + price: 0, + supply: '', + // 流程控制字段 + is_simple: 0, // 是否为简易流程 + has_charge: 0, // 是否为河道处收费类项目 + isBudget: 0, // 是否为预算内确定项目 + is_substitute: 0, // 是否为代建项目 + // 新增流程控制字段 + request: 0, // 请示流程 + purchaseApproval: 0, // 采购业务审批流程 + tenderReview: 0, // 招标文件审查流程 + contractSign: 0, // 合同会签流程 + expenses: [ { - validator:pricePass, - trigger: 'change' + content: '', + amount: 0, + ratio: '', + payee: '' } - ], - - fundingChannels: [{ - required: true, - message: "必填" - }], - plan: [{ - validator: planPass, - trigger: 'change' - }] + ] }, + categoryOptions: [], + purchaseMethodsMap: {}, + affairTypeOptions: [], + contractTypeOptions: [], + purchaseFormOptions: [], + purchaseMethodOptions: [], isShowPlan: false, //新增中预算计划 plans: [], //预算数据 planSearch: { @@ -1211,6 +1199,11 @@ export default { plansPageIndex: 1, isShowEditor: false, + contractTypes: [ + { label: '设备采购', value: 'equipment' }, + { label: '工程合同', value: 'project' }, + { label: '服务合同', value: 'service' } + ], } }, methods: { @@ -1418,10 +1411,9 @@ export default { } }, //y验证合同的名称是否存在重复 - checkName(e) { - checkContractName({name: e}).then(res => { - console.log(res); - }) + checkName(name) { + // 暂时不调用 API,直接返回 + console.log('检查名称:', name) }, confirmPlanForSearch() { this.isShowPlanForSearch = false; @@ -1546,6 +1538,8 @@ export default { this.moneyWay = (await getparameter({ number: 'money_way' })).detail + + this.form.moneyWay = this.moneyWay }, //获取购买方式 async getPurchaseWay() { @@ -1626,19 +1620,30 @@ export default { this.isShowPlan = true await this.getBudgets() }, - async showPlanForSearch() { + async showPlanForSearch(search='search') { + console.log("sdfsdfsdfsdfsfsfsd:"+search) + this.planSource = search this.isShowPlanForSearch = true await this.getBudgets(); }, //选择计划 搜索 selectPlanForSearch(sel) { console.log(sel) + + if (this.planSource === 'search') { if (sel) { this.select.plan_id = sel.id; this.select.plan_name = sel.name; } else { this.select.plan_id = ""; this.select.plan_name = ""; + } + } else { + if (sel) { + this.form.plan_display = sel.name; + } else { + this.form.plan_display = ""; + } } }, //选择计划 @@ -1685,24 +1690,24 @@ export default { }, //确认计划选择 planSelect() { - if (this.plan.length === 0) { - Message({ - type: 'warning', - message: '选择计划不能为空' - }) + const selectedRows = this.$refs.planTable.getSelection() + if (!selectedRows || selectedRows.length === 0) { + this.$Message.warning('请选择至少一个预算计划') return } - for (let item of this.plan) { - console.log(item) - if (!item.value.use_money) { - Message({ - type: 'warning', - message: '金额不能为空' - }) - return - } - } - this.form.plan = this.plan + + // 更新选中的预算计划 + this.form.plan = selectedRows.map(item => ({ + id: item.id, + name: item.name, + money: item.money, + useMoney: item.useMoney || 0 + })) + + // 更新显示文本 + this.updatePlanDisplay() + + // 关闭弹框 this.isShowPlan = false }, @@ -1720,13 +1725,13 @@ export default { }, //确认计划选择搜索 planSelectForSearch() { - if (this.select.plan_id == "") { - Message({ - type: 'warning', - message: '选择计划不能为空' - }) - return - } + // if (this.select.plan_id == "") { + // Message({ + // type: 'warning', + // message: '选择计划不能为空' + // }) + // return + // } this.isShowPlanForSearch = false }, //默认选择计划 @@ -1746,36 +1751,49 @@ export default { } }, //提交新建 - submit() { - addContrant({ - type: this.form.type, - is_plan: this.form.isBudget ? 1 : 0, - purchase_type_id: this.form.methods, - purchase_way_id: this.form.modality, - money_way_id: `${this.form.fundingChannels.toString()}`, - plan_price: this.form.price, - name: this.form.name, - contract_plan_links: this.form.plan.map(item => { - return item.value - }), - is_substitute: this.form.is_substitute, - is_simple:this.form.is_simple, - has_charge: this.form.has_charge, - supply:this.form.supply, - money:this.form?.money, - status:this.form?.is_simple ? 2 : 1, - gov_plane_id: this.form.gov_plane_id, - contract_carry_department: this.form.contract_carry_department.map(i => ({carry_department_id: i})) - }).then(res => { - this.isShowAdd = false - Message({ - type: 'success', - message: '操作成功' - }) - this.$refs['addContract'].reset() - this.$refs['planTable'].clearSelection() - this.getContracts() - }) + async submit() { + try { + // 获取分类配置 + const res = await getContractCategoryTemplateBaseConfig() + if (res.errcode !== undefined) { + this.$message.error(res.errmsg || '获取分类配置失败') + return + } + + // 保存采购方式映射 + this.purchaseMethodsMap = res.purchase_methods || {} + + // 设置分类选项 - 从第二级开始（合同类、报销类、其他支出类） + this.categoryOptions = res.map?.[0]?.children || [] + + // 递归处理每一层的 children，确保所有层级都被正确解析 + const processChildren = (items) => { + if (!items) return + items.forEach(item => { + if (item.children) { + // 确保每个子项都有正确的 id 和 name + item.children = item.children.map(child => ({ + id: child.id, + name: child.name || child.value, // 添加对 value 字段的支持 + children: child.children || [] + })) + processChildren(item.children) + } + }) + } + + // 处理所有层级的 children + processChildren(this.categoryOptions) + + // 重置表单 + this.resetForm() + + // 打开模态框 + this.isShowAdd = true + } catch (error) { + console.error('获取分类配置失败:', error) + this.$message.error('获取分类配置失败') + } }, //删除合同 @@ -1790,6 +1808,394 @@ export default { this.getContracts() }) }, + handleCategoryChange() { + this.form.affairType = '' + this.form.contractType = '' + this.form.purchaseForm = '' + this.form.purchaseMethod = '' + this.updateTypeOptions() + }, + + handleAffairTypeChange() { + this.form.contractType = '' + this.form.purchaseForm = '' + this.form.purchaseMethod = '' + this.updateTypeOptions() + }, + + handleContractTypeChange() { + this.form.purchaseForm = '' + this.form.purchaseMethod = '' + this.updateTypeOptions() + }, + + handlePurchaseFormChange() { + this.form.purchaseMethod = '' + this.updateTypeOptions() + }, + + handlePurchaseMethodChange() { + this.updateTypeOptions() + }, + + updateTypeOptions() { + // 重置所有选项 + this.affairTypeOptions = [] + this.contractTypeOptions = [] + this.purchaseFormOptions = [] + this.purchaseMethodOptions = [] + this.purchaseSubFormOptions = [] + + // 获取当前选中的分类 + const selectedCategory = this.categoryOptions.find(item => item.id === this.form.category) + if (!selectedCategory) return + + // 更新事项类型选项 + this.affairTypeOptions = selectedCategory.children || [] + + // 获取当前选中的事项类型 + const selectedAffairType = this.affairTypeOptions.find(item => item.id === this.form.affairType) + if (!selectedAffairType) return + + // 更新合同类型选项 + this.contractTypeOptions = selectedAffairType.children || [] + + // 获取当前选中的合同类型 + const selectedContractType = this.contractTypeOptions.find(item => item.id === this.form.contractType) + if (!selectedContractType) return + + // 更新采购形式选项 + this.purchaseFormOptions = selectedContractType.children || [] + + // 获取当前选中的采购形式 + const selectedPurchaseForm = this.purchaseFormOptions.find(item => item.id === this.form.purchaseForm) + if (!selectedPurchaseForm) return + + // 更新采购子形式选项 + this.purchaseSubFormOptions = selectedPurchaseForm.children || [] + + // 获取当前选中的采购子形式 + const selectedPurchaseSubForm = this.purchaseSubFormOptions.find(item => item.id === this.form.purchaseSubForm) + + // 如果有采购子形式，使用其children作为采购方式 + if (selectedPurchaseSubForm && selectedPurchaseSubForm.children) { + this.purchaseMethodOptions = selectedPurchaseSubForm.children + } + // 如果没有采购子形式，使用采购形式的children作为采购方式 + else if (selectedPurchaseForm.children) { + this.purchaseMethodOptions = selectedPurchaseForm.children + } + }, + + nextStep() { + if (this.validateCurrentStep()) { + this.currentStep++ + } + }, + + prevStep() { + this.currentStep-- + }, + + validateCurrentStep() { + if (this.currentStep === 1) { + if (!this.form.category || !this.form.affairType || !this.form.contractType || + !this.form.purchaseForm || !this.form.purchaseMethod) { + this.$Message.warning('请填写所有必填项') + return false + } + + // 获取模版配置参数 + this.getTemplateConfig() + return false // 等待配置参数获取完成 + } else if (this.currentStep === 2) { + // 使用表单验证进行校验 + let isValid = false + this.$refs.basicInfoForm.validate(valid => { + isValid = valid + if (!valid) { + this.$Message.warning('请填写所有必填项') + } + }) + return isValid + } + return true + }, + + // 获取模版配置参数 + async getTemplateConfig() { + try { + const params = { + category: this.form.category, + work_type: this.form.affairType, + contract_type: this.form.contractType, + purchase_form: this.form.purchaseForm + } + + const res = await getContractCategoryTemplateConfigParams(params) + if (res.errcode !== undefined) { + this.$message.error(res.errmsg || '获取模版配置失败') + return + } + + // 根据返回的配置参数设置表单 + this.setFormConfig(res) + + // 进入下一步 + this.currentStep++ + } catch (error) { + console.error('获取模版配置失败:', error) + this.$message.error('获取模版配置失败') + } + }, + + // 设置表单配置 + setFormConfig(config) { + console.log('模版配置参数:', config) + + // 只更新显示/隐藏状态，不影响数据来源 + Object.assign(this.showFields, { + projectName: config.project_name === 1, // 项目名称 + projectType: config.project_type === 1, // 项目类型 + budgetPrice: config.budget_price === 1, // 预算价格 + fundChannel: config.fund_channel === 1, // 资金渠道 + budgetPlan: config.budget_plan === 1 // 预算计划 + }) + }, + + handleAddContract() { + this.isShowAdd = true; + // Call API to get category options + this.getCategoryOptions(); + // Reset form + this.resetForm(); + }, + + handleAddContractOk() { + if (this.currentStep < 2) { + // 第一步，执行验证并进入下一步 + if (this.validateCurrentStep()) { + this.currentStep++; + } + } else { + // 最后一步，执行提交 + if (this.validateCurrentStep()) { + this.submit() + } + } + }, + + handleAddContractCancel() { + this.resetForm() + this.isShowAdd = false + }, + + cancel() { + this.handleAddContractCancel() + }, + + resetForm() { + this.currentStep = 1 + this.form = { + category: '', + affairType: '', + contractType: '', + purchaseForm: '', + purchaseSubForm: '', + purchaseMethod: '', + name: '', + type: '', // 项目类型 + money_way_id: '', + plan: [], + plan_display: '', // 预算计划显示文本 + price: 0, + supply: '', + // 流程控制字段 + is_simple: 0, // 是否为简易流程 + has_charge: 0, // 是否为河道处收费类项目 + isBudget: 0, // 是否为预算内确定项目 + is_substitute: 0, // 是否为代建项目 + // 新增流程控制字段 + request: 0, // 请示流程 + purchaseApproval: 0, // 采购业务审批流程 + tenderReview: 0, // 招标文件审查流程 + contractSign: 0, // 合同会签流程 + expenses: [ + { + content: '', + amount: 0, + ratio: '', + payee: '' + } + ] + } + + this.affairTypeOptions = [] + this.contractTypeOptions = [] + this.purchaseFormOptions = [] + this.purchaseSubFormOptions = [] + this.purchaseMethodOptions = [] + }, + + // 获取分类配置 + async getCategoryOptions() { + try { + // 获取分类配置 + const res = await getContractCategoryTemplateBaseConfig() + if (res.errcode !== undefined) { + this.$message.error(res.errmsg || '获取分类配置失败') + return + } + + // 保存采购方式映射 + this.purchaseMethodsMap = res.purchase_methods || {} + + // 设置分类选项 - 从第二级开始（合同类、报销类、其他支出类） + this.categoryOptions = res.map?.[0]?.children || [] + + // 递归处理每一层的 children，确保所有层级都被正确解析 + const processChildren = (items) => { + if (!items) return + items.forEach(item => { + if (item.children) { + // 确保每个子项都有正确的 id 和 name + item.children = item.children.map(child => ({ + id: child.id, + name: child.name || child.value, // 添加对 value 字段的支持 + children: child.children || [] + })) + processChildren(item.children) + } + }) + } + + // 处理所有层级的 children + processChildren(this.categoryOptions) + + // 初始化其他选项 + this.updateTypeOptions() + } catch (error) { + console.error('获取分类配置失败:', error) + this.$message.error('获取分类配置失败') + } + }, + + // 初始化采购方式映射 + initPurchaseMethodsMap() { + this.purchaseMethodsMap = {} + // 递归遍历分类选项,构建采购方式映射 + const traverse = (items) => { + items.forEach(item => { + if (item.children) { + traverse(item.children) + } else { + // 如果是叶子节点,添加到映射中 + this.purchaseMethodsMap[item.id] = item.name + } + }) + } + traverse(this.categoryOptions) + }, + + // 获取分类名称的方法 + getCategoryName(id) { + const category = this.categoryOptions.find(item => item.id === id) + return category ? category.name : '' + }, + + getAffairTypeName(id) { + const category = this.categoryOptions.find(item => item.id === this.form.category) + if (category && category.children) { + const affairType = category.children.find(item => item.id === id) + return affairType ? affairType.name : '' + } + return '' + }, + + getContractTypeName(id) { + const category = this.categoryOptions.find(item => item.id === this.form.category) + if (category && category.children) { + const affairType = category.children.find(item => item.id === this.form.affairType) + if (affairType && affairType.children) { + const contractType = affairType.children.find(item => item.id === id) + return contractType ? contractType.name : '' + } + } + return '' + }, + + getPurchaseFormName(id) { + const category = this.categoryOptions.find(item => item.id === this.form.category) + if (category && category.children) { + const affairType = category.children.find(item => item.id === this.form.affairType) + if (affairType && affairType.children) { + const contractType = affairType.children.find(item => item.id === this.form.contractType) + if (contractType && contractType.children) { + const purchaseForm = contractType.children.find(item => item.id === id) + return purchaseForm ? purchaseForm.name : '' + } + } + } + return '' + }, + + getPurchaseMethodName(id) { + // 从嵌套结构中查找采购方式名称 + const category = this.categoryOptions.find(item => item.id === this.form.category) + if (category && category.children) { + const affairType = category.children.find(item => item.id === this.form.affairType) + if (affairType && affairType.children) { + const contractType = affairType.children.find(item => item.id === this.form.contractType) + if (contractType && contractType.children) { + const purchaseForm = contractType.children.find(item => item.id === this.form.purchaseForm) + if (purchaseForm && purchaseForm.children) { + // 如果有选择子表单，从子表单中查找 + if (this.form.purchaseSubForm) { + const purchaseSubForm = purchaseForm.children.find(item => item.id === this.form.purchaseSubForm) + if (purchaseSubForm && purchaseSubForm.children) { + const purchaseMethod = purchaseSubForm.children.find(item => item.id === id) + if (purchaseMethod) { + return purchaseMethod.name + } + } + } + + // 直接从采购形式中查找 + const purchaseMethod = purchaseForm.children.find(item => item.id === id) + if (purchaseMethod) { + return purchaseMethod.name + } + } + } + } + } + + // 备用：从映射中查找 + return this.purchaseMethodsMap[id] || '' + }, + + // 更新预算计划显示文本 + updatePlanDisplay() { + if (this.form.plan && this.form.plan.length > 0) { + this.form.plan_display = `已选择 ${this.form.plan.length} 个预算计划` + } else { + this.form.plan_display = '' + } + }, + // 新增方法：移除预算计划 + removePlan(plan) { + const index = this.form.plan.findIndex(item => item.id === plan.id) + if (index !== -1) { + this.form.plan.splice(index, 1) + + // 更新显示文本 + if (this.form.plan && this.form.plan.length > 0) { + this.form.plan_display = `已选择 ${this.form.plan.length} 个预算计划` + } else { + this.form.plan_display = '' + } + } + }, }, mounted() { this.window.width = screen.availWidth * 0.95 @@ -1802,10 +2208,8 @@ export default { this.user = response; if (that.userList.indexOf(response.username) != -1) { - that.hasEdit = true; } - }).catch(error => { }) this.getPurchaseType() @@ -1813,6 +2217,7 @@ export default { this.getDepartment() this.getPurchaseWay() this.getMoneyWay() + //页面激活后刷新合同列表 window.onfocus = () => { this.getContracts(false, true) @@ -1882,4 +2287,298 @@ export default { content: '（元）' } } + +.contract-add-modal { + :deep(.ivu-modal-content) { + border-radius: 8px; + overflow: hidden; + } + + :deep(.ivu-modal-header) { + background: #f8f8f9; + padding: 16px 24px; + border-bottom: 1px solid #e8eaec; + } + + :deep(.ivu-modal-body) { + padding: 24px; + } + + .steps-header { + display: flex; + justify-content: space-between; + margin-bottom: 32px; + padding: 0 20px; + + .step { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + flex: 1; + + &:not(:last-child)::after { + content: ''; + position: absolute; + top: 16px; + left: 50%; + width: 100%; + height: 2px; + background: #e8eaec; + z-index: 1; + } + + .step-number { + width: 32px; + height: 32px; + border-radius: 50%; + background: #e8eaec; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 8px; + position: relative; + z-index: 2; + } + + .step-text { + color: #808695; + font-size: 14px; + } + + &.active { + .step-number { + background: #2d8cf0; + } + .step-text { + color: #2d8cf0; + font-weight: 500; + } + } + } + } + + .step-content { + padding: 0 20px; + } + + .form-group { + margin-bottom: 20px; + + .form-label { + display: block; + margin-bottom: 8px; + color: #515a6e; + font-weight: 500; + } + + .form-input { + width: 100%; + } + + .form-button { + width: 100%; + } + } + + .expense-table { + width: 100%; + border-collapse: collapse; + margin-top: 8px; + + th, td { + padding: 8px; + border: 1px solid #e8eaec; + text-align: center; + } + + th { + background: #f8f8f9; + color: #515a6e; + font-weight: 500; + } + + td { + .ivu-input { + border: none; + &:focus { + box-shadow: none; + } + } + } + } + + .step-actions { + display: flex; + justify-content: flex-end; + gap: 12px; + margin-top: 32px; + padding: 0 20px; + + .action-button { + min-width: 100px; + } + } +} + +.template-info { + background-color: #f5f7fa; + border-radius: 4px; + padding: 16px; + margin-bottom: 24px; + + .info-title { + font-size: 16px; + font-weight: 600; + color: #1f2937; + margin-bottom: 16px; + padding-bottom: 12px; + border-bottom: 1px solid #e5e7eb; + } + + .info-content { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 16px; + + .info-item { + display: flex; + align-items: center; + + .label { + color: #4b5563; + font-weight: 500; + margin-right: 8px; + min-width: 84px; + } + + .value { + color: #1f2937; + } + } + } +} + +.form-section { + background-color: #ffffff; + border-radius: 4px; + padding: 20px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + + .section-title { + font-size: 16px; + font-weight: 600; + color: #1f2937; + margin-bottom: 20px; + padding-bottom: 12px; + border-bottom: 1px solid #e5e7eb; + } + + :deep(.el-form-item) { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + + :deep(.el-form-item__label) { + font-weight: 500; + color: #4b5563; + } + + :deep(.el-input), + :deep(.el-input-number), + :deep(.el-select) { + width: 100%; + } +} + +.helper-text { + margin-top: 8px; + color: #666; + font-size: 13px; + line-height: 1.4; +} + +.form-section { + & + .form-section { + margin-top: 24px; + } + + :deep(.el-radio-group) { + .el-radio { + margin-right: 30px; + + &:last-child { + margin-right: 0; + } + } + } +} + +.process-control-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + .control-item { + background: #f9fafb; + border-radius: 4px; + padding: 16px; + + .control-label { + color: #4b5563; + font-weight: 500; + margin-bottom: 12px; + } + + .control-content { + .helper-text { + margin-top: 8px; + color: #666; + font-size: 13px; + line-height: 1.4; + } + } + + :deep(.el-radio-group) { + display: flex; + gap: 24px; + + .el-radio { + margin-right: 0; + } + } + } +} + +.plan-selector { + width: 100%; + + .plan-input { + width: 100%; + } + + .plan-tags { + margin-top: 8px; + display: flex; + flex-wrap: wrap; + gap: 8px; + + .el-tag { + margin-right: 0; + } + } +} + +.search-box { + margin-bottom: 16px; +} + +.plan-list { + height: 400px; + overflow-y: auto; +}