easydo-chengfa/src/components/scChengTou/purchase/plan.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="120px">
		<el-row :gutter="15">
            <el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="采购名称:" prop="planName">
					<el-input v-model="form.planName" placeholder="请输入采购名称"></el-input>
				</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="hygh.modelValue" :apiObj="$API.costServer.contractPlan" :apiKey="hygh.activeName" :params="hygh.params" :filters="hygh.filter" :props="hygh.props" :table-width="840" :disabled="!form.projectId || form.id" clearable placeholder="请选择合约规划" placement="bottom" hidePagination :highlightCurrent="hygh.activeName == 'contract' && hygh.filter.useState == 'No_Use'" @resetFilter="resetFilter" @change="tableSelectChange">
						<template #header="{ submit }">
							<el-tabs v-model="hygh.activeName">
								<el-tab-pane label="合约视角" name="contract"></el-tab-pane>
								<el-tab-pane label="科目视角" name="subject"></el-tab-pane>
							</el-tabs>
							<el-form>
								<el-row :gutter="15">
									<el-col :md="9" :xs="24">
										<el-form-item label="所属项目:">
											<el-select class="left-option-select" v-model="hygh.params.projectCodes" :teleported="false" filterable multiple collapseTags placeholder="请选择所属项目">
												<el-option v-for="item in deptProject" :key="item.id" :label="item.projectName" :value="item.projectNo"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :md="8" :xs="24">
										<el-form-item label="合约规划:">
											<el-input v-model="hygh.filter.name" clearable placeholder="请输入合约规划名称"></el-input>
										</el-form-item>
									</el-col>
									<!-- <el-col :md="8" :xs="24">
										<el-form-item>
											<el-radio-group v-model="hygh.filter.useState">
												<el-radio class="near-radio" v-for="(label, key) in useStateDic" :key="key" :label="label" :value="key"></el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col> -->
									<el-col :md="3" :xs="24">
										<el-form-item>
											<el-button type="primary" icon="el-icon-search" @click="submit">查询</el-button>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</template>
						
						<el-table-column label="所属项目" align="center" show-overflow-tooltip>
							<template #default="scope">{{ formatProjectName(scope.row.projectId) }}</template>
						</el-table-column>
						<el-table-column :label="hygh.activeName == 'contract' && '合约规划' || '科目名称'" prop="name" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column :label="hygh.activeName == 'contract' && '合约编码' || '科目编码'" prop="code" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column label="预算金额 (元)" prop="taxAmount" align="center"></el-table-column>
						<el-table-column label="合约类型" prop="sourceTypeName" align="center"></el-table-column>
						<el-table-column v-if="hygh.activeName == 'contract'" label="采购方式" prop="procurementType" align="center"></el-table-column>
						<el-table-column label="占用状态" align="center">
							<template #default="scope">{{ formatState(scope.row.useState) }}</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 v-model="form.type" dic="procurement_category" 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 v-model="form.deptId" :apiObj="$API.system.dept" isDept disabled></tree-select>
				</el-form-item>
			</el-col>
		</el-row>

		<scTitle>采购信息</scTitle>
		<el-row :gutter="15">
			<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="计划开始日期:" prop="beginDate">
					<el-date-picker v-model="form.beginDate" value-format="YYYY-MM-DD" placeholder="请选择计划开始日期"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="进场日期:">
					<el-date-picker v-model="form.enterDate" value-format="YYYY-MM-DD" placeholder="请选择进场日期"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :lg="lg" :md="12" :xs="24">
				<el-form-item label="计划完成日期:">
					<el-date-picker v-model="form.endDate" value-format="YYYY-MM-DD" placeholder="请选择计划完成日期"></el-date-picker>
				</el-form-item>
			</el-col>
            <el-col :xs="24" v-if="isIframe && form.status == 'approve'">
                <el-form-item class="iframe-item__btn" label-width="0">
                    <template v-if="updateFolder">
                        <el-button @click="updateFolder = !updateFolder">取 消</el-button>
                        <el-button type="primary" :loading="isSaveing" @click="submit">确 定</el-button>
                    </template>
                    <template v-else>
                        <el-button type="primary" @click="updateFolder = !updateFolder">编 辑</el-button>
                    </template>
                </el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
	import moment from "moment";
	import { useStateDic } from "@/views/procurement/plan/main";

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

		data() {
			return {
				useStateDic,
				props: {
					label: "name",
					value: "deptId"
				},

                loading: false,
                isSaveing: false,
                updateFolder: !this.disabled,
				hygh: {
					modelValue: null,
					activeName: "contract",
					projects: [],
					props: { label: "name" },
					params: {
						projectCodes: []
					},
					filter: {
						name: null,
						useState: "No_Use"
					}
				},

				form: {
					id: null,
					projectId: null,
					projectNo: null,
					contractPlanId: null,
					contractPlanName: null,
					contractPlanCode: null,
					planName: null,
					deptId: this.$TOOL.data.get("USER_INFO").deptId,
					belongDeptId: null,
					type: null,
					createId: this.$TOOL.data.get("USER_INFO").id,
					createName: this.$TOOL.data.get("USER_INFO").nickName,
					budgetAmount: null,
					enterDate: null,
					beginDate: null,
					endDate: null,
                    status: null
				},
				rules: {
					projectId: [{ required: true, message: "请选择采购所属项目" }],
					planName: [{ required: true, message: "请输入采购名称" }],
					belongDeptId: [{ required: true, message: "请选择业务所属公司" }],
					type: [{ required: true, message: "请选择采购类别" }],
					budgetAmount: [{ required: true, message: "请输入预算金额" }],
					beginDate: [{ required: true, message: "请选择计划开始日期" }]
				}
			}
		},

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

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

		methods: {
			formatState(useState) {
				return useStateDic[useState] || "";
			},

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

			async getProjects() {
				try {
					const res = await this.$API.system.project.all({ orderBy: "id_desc", projectStatus: "active" });
					this.hygh.projects = res || [];
				} catch (error) {
					this.hygh.projects = [];
				}
			},

			// 表单注入数据
			async setData() {
				try {
					this.loading = true;
					const { plan } = await this.$API.procurement.plan.detail({ id: this.id });
					this.loading = false;
					for (const key in this.form) {
                        if (key == "contractPlanId" && plan[key]) this.hygh.modelValue = { contractPlanId: plan[key], name: plan["contractPlanName"], code: plan["contractPlanCode"] }
                        this.form[key] = plan[key] || null;
					}
				} catch (error) {
					this.loading = false;
				}
			},

			// 重置合约规划筛选
			resetFilter() {
				this.hygh.activeName = "contract";
				this.hygh.params.projectCodes = this.form.projectNo && [this.form.projectNo] || [];
				this.hygh.filter = { name: null, useState: "No_Use" };
			},

			tableSelectChange(e) {
				if (e) {
					this.form.contractPlanId = e.id;
					this.form.contractPlanName = e.name;
					this.form.contractPlanCode = e.code;
					this.form.budgetAmount = e.taxAmount;
					this.form.projectNo = this.hygh.projects.find(p => p.id == e.projectId) && this.hygh.projects.find(p => p.id == e.projectId).projectNo || null;
					if (e.procurementTime) this.form.beginDate = moment(e.procurementTime).format("YYYY-MM-DD");
				} else {
					this.form.contractPlanId = null;
					this.form.contractPlanName = null;
					this.form.contractPlanCode = null;
				}
			},

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

			projectChange(e) {
                this.hygh.modelValue = null;
				this.form.projectNo = this.hygh.projects.find(p => p.id == e) && this.hygh.projects.find(p => p.id == e).projectNo || null;
				this.hygh.params.projectCodes = this.form.projectNo && [this.form.projectNo] || [];
                this.tableSelectChange();
			},

            submit() {
                this.isSaveing = true;
				this.$API.procurement.plan.updateFile(this.form).then(() => {
					this.isSaveing = false;
					this.$message.success("操作成功");
					this.updateFolder = !this.updateFolder;
                    this.setData();
				}).catch(() => this.isSaveing = false);
            }
		}
	}
</script>

<style lang="scss" scoped>
.sc-title {
  margin-bottom: 15px;
}

.dialog-form {
  padding: 10px 30px 10px 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 {
  padding-bottom: 20px;

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

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

.near-radio {
  margin-right: 12px;
}

.left-option-select {
  :deep(.el-select-dropdown__item) {
    text-align: left;
  }

  :deep(.el-select__selection) {
    flex-wrap: nowrap;
  }
}

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

  .near-radio {
    margin-right: 32px;
  }
}
</style>