easydo-chengfa/src/components/scChengTou/purchase/apply.vue

<template>
	<scTitle v-if="isIframe" class="iframe-detail-title">采购申请信息</scTitle>
    <el-form v-loading="loading" :class="['dialog-form', disabled && 'dialog-form-disabled']" ref="dialogForm" :model="form" :rules="rules" :disabled="disabled" label-width="130px">
		<el-row :gutter="15">
            <el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="采购申请名称:" prop="name">
					<el-input v-model="form.name" placeholder="请输入采购申请名称"></el-input>
				</el-form-item>
			</el-col>
            <el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="是否计划内采购:">
					<el-radio-group v-model="form.isInPlan" @change="radioChange">
						<el-radio label="是" :value="true"></el-radio>
						<el-radio label="否" :value="false"></el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
            <el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="业务所属公司:" prop="belongDeptId">
					<tree-select v-model="form.belongDeptId" :apiObj="$API.system.dept" isDept isAllDept check-strictly :disabled="form.id" placeholder="请选择业务所属公司" @change="deptChange"></tree-select>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="采购所属项目:" prop="projectId">
					<el-select v-model="form.projectId" filterable :disabled="!form.belongDeptId || form.id" placeholder="请选择采购所属项目" @change="projectChange">
						<el-option v-for="item in deptProject" :key="item.id" :label="item.projectName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="采购计划引入:">
					<sc-table-select v-model="tableSelect.modelValue" :apiObj="tableSelect.apiObj" apiKey="getSelectPage" :params="tableSelect.params" :table-width="840" :props="tableSelect.props" applySql :disabled="!form.projectId || !form.isInPlan || form.id" clearable placeholder="请选择采购计划" placement="bottom" @change="tableSelectChange">
						<template #header="{ queryForm, submit: fetchPlan }">
							<el-row :gutter="15">
								<el-col :md="9" :xs="24">
									<el-form-item label="采购计划:" label-width="80px">
										<el-input v-model="queryForm.planName" clearable placeholder="请输入采购计划名称" @keyup.enter="fetchPlan" @clear="fetchPlan"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						
						<el-table-column label="计划状态" align="center" width="120">已审核<sc-status-indicator type="success"></sc-status-indicator></el-table-column>
						<el-table-column label="采购项目名称" prop="planName" align="center" width="200" show-overflow-tooltip></el-table-column>
						<el-table-column label="采购所属项目" align="center" width="200" show-overflow-tooltip>
                    		<template #default="scope">{{ formatProjectName(scope.row.projectId) }}</template>
						</el-table-column>
						<el-table-column label="采购类别" align="center" width="120">
							<template #default="scope">{{ formatType(scope.row.type) }}</template>
						</el-table-column>
						<el-table-column label="合约规划" prop="contractPlanName" align="center" width="200" show-overflow-tooltip></el-table-column>
						<el-table-column label="预算金额 (元)" prop="budgetAmount" align="center" width="140"></el-table-column>
						<el-table-column label="计划开始日期" prop="beginDate" align="center" width="140"></el-table-column>
						<el-table-column label="计划完成日期" prop="endDate" align="center" width="140"></el-table-column>
						<el-table-column label="采购公司/部门" align="center" width="200" show-overflow-tooltip>
                    		<template #default="scope">{{ formatDeptName(scope.row.deptId) }}</template>
						</el-table-column>
						<el-table-column label="业务所属公司" align="center" width="200" show-overflow-tooltip>
                    		<template #default="scope">{{ formatDeptName(scope.row.belongDeptId) }}</template>
						</el-table-column>
					</sc-table-select>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="采购类别:" prop="type">
					<dict-select ref="dictSelect" v-model="form.type" dic="procurement_category" filterable placeholder="请选择采购类别" @change="typeChange"></dict-select>
				</el-form-item>
			</el-col>
            <el-col v-if="form.type && !isEngineering" :lg="lg" :md="12" :xs="24">
				<el-form-item label="专项费用类型:" prop="specialFeeType">
					<dict-select v-model="form.specialFeeType" dic="special_expenses_type" filterable placeholder="请选择专项费用类型"></dict-select>
				</el-form-item>
			</el-col>
            <el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="招采类型:" prop="purchaseType">
					<dict-select v-model="form.purchaseType" dic="procurement_type" filterable placeholder="请选择招采类型"></dict-select>
				</el-form-item>
			</el-col>
            <el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="创建人:">
					<el-input v-model="form.createName" disabled></el-input>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="发起人所属公司:">
					<tree-select ref="deptTreeSelect" v-model="form.deptId" :apiObj="$API.system.dept" isDept disabled></tree-select>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="资金来源:">
					<dict-select v-model="form.fundSource" dic="fund_source" filterable clearable placeholder="请选择资金来源"></dict-select>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="预算金额:" prop="budgetAmount">
					<el-input-number v-model="form.budgetAmount" :precision="2" :step="0.1" :controls="false" placeholder="请输入预算金额"></el-input-number>
					<span class="input-number-suffix">元</span>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="是否共用:">
					<el-radio-group v-model="form.isShare" disabled>
						<el-radio label="是" :value="0"></el-radio>
						<el-radio label="否" :value="1"></el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
            <el-col :lg="lg" :md="12" :xs="24">
                <el-form-item label="是否需要成本审批:">
                    <el-radio-group v-model="form.isCostApprovalRequired">
                        <el-radio label="是" value="1"></el-radio>
                        <el-radio label="否" value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
			</el-col>
            <el-col :lg="lg" :md="12" :xs="24">
                <el-form-item label="外部律师选聘:">
                    <el-radio-group v-model="form.isLawyer">
                        <el-radio label="是" :value="1"></el-radio>
                        <el-radio label="否" :value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
			</el-col>
            <el-col v-if="form.isLawyer == 1" :xs="24">
                <external-lawyer-selection ref="lawyerSelection" v-model="form.purchaseLaw" :lg="lg" :disabled="disabled"></external-lawyer-selection>
			</el-col>
			<el-col :xs="24">
				<el-form-item label="采购建议:">
					<el-input v-model="form.suggestion" type="textarea" :rows="4" placeholder="请输入采购建议"></el-input>
				</el-form-item>
			</el-col>
			<el-col :xs="24">
				<el-form-item label="附件上传:">
					<sc-upload-file v-model="form.folders['purchase/apply'].entities" :limit="10">
						<el-button type="primary" icon="el-icon-upload" size="small"></el-button>
					</sc-upload-file>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
    import externalLawyerSelection from "./lawyer";

	export default {
        components: {
            externalLawyerSelection
        },
		props: {
			id: { type: String, default: "" },
			lg: { type: Number, default: 8 },
			disabled: { type: Boolean, default: false },
			isIframe: { type: Boolean, default: false }
		},

		data() {
			return {
				loading: false,
                isSaveing: false,
                updateFolder: !this.disabled,
				projects: [],
				tableSelect: {
					apiObj: this.$API.procurement.plan,
					params: { status: "done" },
					props: { label: "planName" },
					modelValue: null
				},

				form: {
					id: null,
					planId: null,
					planName: null,
					name: null,
					deptId: this.$TOOL.data.get("USER_INFO").deptId,
					belongDeptId: null,
					type: null,
                    specialFeeType: null,
					purchaseType: null,
					isInPlan: true,
					createId: this.$TOOL.data.get("USER_INFO").id,
					createName: this.$TOOL.data.get("USER_INFO").nickName,
					budgetAmount: null,
					fundSource: null,
					projectId: null,
					projectNo: null,
					isShare: 1,
                    isCostApprovalRequired: "0",
                    isLawyer: 0,
					suggestion: null,
                    status: null,
					folders: {
						"purchase/apply": {
							entities: []
						}
					},
                    purchaseLaw: null
				},
				rules: {
					projectId: [{ required: true, message: "请选择采购所属项目" }],
					name: [{ required: true, message: "请输入采购申请名称" }],
					belongDeptId: [{ required: true, message: "请选择业务所属公司" }],
					type: [{ required: true, message: "请选择采购类别" }],
                    specialFeeType: [{ required: true, message: "请选择专项费用类型" }],
					purchaseType: [{ required: true, message: "请选择招采类型" }],
					budgetAmount: [{ required: true, message: "请输入预算金额" }]
				}
			}
		},

        computed: {
			isEngineering() {
				return this.formatType(this.form.type) == "工程类";
            },

            deptProject() {
                return this.projects.filter(p => p.deptId == this.form.belongDeptId);
            }
        },

		mounted() {
			this.getProjects();
			if (this.id) this.setData();
		},

		methods: {
			formatType(value) {
				const dicts = this.$refs.dictSelect && this.$refs.dictSelect.options || [];
				return dicts && dicts.find(d => d.value == value) && dicts.find(d => d.value == value).label || "";
			},

			formatDeptName(value) {
				const depts = this.$refs.deptTreeSelect && this.$refs.deptTreeSelect.treeList || [];
				return depts && depts.find(d => d.deptId == value) && depts.find(d => d.deptId == value).name || "";
			},

			formatProjectName(value) {
				return this.projects.find(p => p.id == value) && this.projects.find(p => p.id == value).projectName || "";
			},

			async getProjects() {
				this.projects = await this.$API.system.project.all({ orderBy: "id_desc", projectStatus: "active" });
			},

			// 表单注入数据
			async setData() {
				try {
					this.loading = true;
					const { purchase } = await this.$API.procurement.apply.detail({ id: this.id });
					this.loading = false;
					for (const key in this.form) {
						if (key == "isInPlan") this.form[key] = !!purchase[key];
						else if (key == "isShare") this.form[key] = purchase[key];
						else if (key == "isLawyer") this.form[key] = !!purchase[key] && 1 || 0;
						else if (key == "purchaseLaw") {
                            if (purchase.isLawyer == 1) {
                                this.form[key] = purchase[key] || null;
                                this.$nextTick(() => this.$refs.lawyerSelection.setData(purchase.purchaseLaw));
                            } else this.form[key] = null;
                        } else if (key == "folders") {
							if (purchase[key]) {
                                for (const folder_key in this.form[key]) {
                                    this.form[key][folder_key]["entities"] = purchase[key][folder_key].entities.map(({ id, mineType, name, path }) => ({ id, mineType, name, path })) || []
                                }
							}
						} else {
							this.form[key] = purchase[key] || null;
							if (key == "planId" && purchase[key]) this.tableSelect.modelValue = { id: purchase[key], planName: purchase["planName"] }
						}
					}
				} catch (error) {
					this.loading = false;
				}
			},

			tableSelectChange(e) {
                if (e) {
					this.form.planId = e.id;
					this.form.planName = e.name;
					this.form.type = e.type;
					this.form.budgetAmount = e.budgetAmount;
				} else {
					this.form.planId = null;
					this.form.planName = null;
				}
			},

            deptChange() {
                this.form.projectId = null;
                this.projectChange();
            },

			projectChange(e) {
				this.form.projectNo = this.projects.find(p => p.id == e) && this.projects.find(p => p.id == e).projectNo || null;
				this.tableSelect.params.projectId = e;
                this.radioChange();
			},

            radioChange(e) {
                if (!e) {
                    this.tableSelect.modelValue = null;
                    this.tableSelectChange();
                }
            },

            typeChange() {
                if (this.isEngineering) this.form.specialFeeType = null;
            }
		}
	}
</script>

<style lang="scss" scoped>
.dialog-form {
  padding: 10px 30px 0 20px;

  .input-number-suffix {
    position: absolute;
    right: 30px;
    color: #262626;
  }

  .iframe-item__btn :deep(.el-form-item__content) {
    justify-content: flex-end;
  }
}

.dialog-form-disabled {
  :deep(.sc-upload-file) {
    .el-upload {
      display: none;
    }

    .el-upload-list.is-disabled {
      margin-top: 0;
    }
  }
}

.dialog-form + .dialog-form {
  padding-top: 0;
  padding-bottom: 10px;
}

.dialog-form-disabled + .dialog-form {
  padding-bottom: 20px;
}

@media (max-width: 992px) {
  .dialog-form {
    padding: 10px 10px 0;
  }

  .dialog-form + .dialog-form {
    padding-top: 0;
    padding-bottom: 10px;
  }
}
</style>