project-manager/h5/src/views/data/repertory.vue

<template>
	<div class="p20">
		<!-- 功能区 -->
		<el-card class="box-card">
			<el-row>
				<el-col :span="6">
					<el-text class="">关键词：</el-text>

					<el-input class="width160" placeholder="请输入关键词" v-model="data.params.keyword"
						@keyup.enter.native="getList"> </el-input>

					<el-button type="primary" class="ml10" @click="getList">
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
					</el-button>
				</el-col>
				<el-col :span="12" class="tr">
					<el-form-item label="创建时间：">
						<el-date-picker v-model="data.params.create_time_begin_time" type="datetime" placeholder="开始创建时间"
							format="YYYY/MM/DD HH:mm:ss" />
						<div class="ml5 mr5">To</div>
						<el-date-picker v-model="data.params.create_time_end_time" type="datetime" placeholder="结束创建时间"
							format="YYYY-MM-DD HH:mm:ss" />
						<el-button type="primary" class="ml10" @click="getList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
					</el-form-item>
				</el-col>

				<el-col :span="6" class="tr">
					<el-button type="primary" @click="addstatus">新增状态</el-button>
					<el-button type="primary" @click="editstatus">更新状态</el-button>
					<el-button type="primary" @click="addPage">新增</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-text class="">负责人：</el-text>
					<el-select class="width160" v-model="data.params.responsibility_person_id" clearable
						placeholder="请选择负责人" @change="getList">
						<el-option :label="item.real_name" :value="item.id" v-for="item in data.repertoryList" />
					</el-select>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item label="状态：">
						<el-select v-model="data.params.status" multiple placeholder="选择状态" @change="getList"
							style="width: 180px">
							<el-option :label="item[1]" :value="item[0]" v-for="item in statusList.data" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item label="最小金额：">
						<el-input type="number" class="width200" placeholder="请输入最小金额" v-model="data.params.min_amount"
							@keyup.enter.native="getList">
							<template #append>元</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item label="最大金额：">
						<el-input type="number" class="width200" placeholder="请输入最大金额" v-model="data.params.max_amount"
							@keyup.enter.native="getList">
							<template #append>元</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" class="tr">
					<el-form-item label="最小维护时间：">
						<el-input type="number" class="width220" placeholder="请输入最小维护时间"
							v-model="data.params.min_maintain_time_days" @keyup.enter.native="getList"><template
								#append>天</template> </el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item label="最大维护时间：">
						<el-input type="number" class="width220" placeholder="请输入最大维护时间"
							v-model="data.params.max_maintain_time_days" @keyup.enter.native="getList"><template
								#append>天</template> </el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item label="最小开发时间：">
						<el-input type="number" class="width220" placeholder="请输入最小开发时间"
							v-model="data.params.min_dev_time_days" @keyup.enter.native="getList"><template
								#append>天</template> </el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item label="最大开发时间：">
						<el-input type="number" class="width220" placeholder="请输入最大开发时间"
							v-model="data.params.max_dev_time_days" @keyup.enter.native="getList"><template
								#append>天</template> </el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-card>
		<!-- 主体区 -->
		<el-card class="box-card mt20" v-loading="data.loading">
			<!-- 列表 -->
			<el-table :data="data.tableData" @selection-change="handleTableDataSelectionChange">
				<el-table-column prop="name" label="项目名称" width="150" />
				<el-table-column prop="create_time" label="创建时间" width="" />
				<el-table-column prop="responsibility_person" label="责任人" width="" />
				<el-table-column prop="source" label="来源" width="" />
				<el-table-column prop="status" label="状态" width="">
					<template #default="scope">
						{{ statusList.data.get(scope.row.status) }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250">
					<template #default="scope">
						<el-button link type="primary" @click="edit(scope.row)">更新</el-button>
						<el-button link type="primary" @click="openDetail(scope.row)">详情</el-button>
						<el-button link type="primary" @click="openContract(scope.row)">查看合同</el-button>
						<el-button link type="danger" @click="deleteOne(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="yc_pagebox">
				<el-pagination v-model:current-page="data.pagination.currentPage"
					v-model:page-size="data.pagination.pageSize" :page-sizes="getThemeConfig.pageSizeArray"
					layout="total, sizes, prev, pager, next, jumper" :total="data.pagination.total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</el-card>
		<!-- 弹出项目 新增,更新的页面-->
		<el-dialog width="1200px" v-if="data.dialog.show" v-model="data.dialog.show" :title="data.dialog.title"
			@close="closePage">
			<el-form :model="data.form" label-width="120px" ref="formRef" v-loading="data.dialog.isLoading">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="项目名称" prop="name"
							:rules="[{ required: true, message: '请填写项目名称', trigger: 'blur' }]">
							<el-input v-model="data.form.name" placeholder="项目名称" />
						</el-form-item>
						<el-form-item label="来源" prop="source"
							:rules="[{ required: true, message: '填写来源', trigger: 'blur' }]">
							<el-input v-model="data.form.source" placeholder="填写来源" />
						</el-form-item>
						<el-form-item label="预估金额" prop="estimated_amount"
							:rules="[{ required: true, message: '填写预估金额', trigger: 'blur' }]">
							<el-input type="number" v-model="data.form.estimated_amount" placeholder="填写预估金额">
								<template #append>元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="约定开发周期/天" prop="pre_dev_time">
							<el-input type="number" v-model="data.form.pre_dev_time" placeholder="填写约定开发周期/天">
								<template #append>天</template>
							</el-input>
						</el-form-item>
						<el-form-item label="约定维护周期/天" prop="pre_maintain_time">
							<el-input type="number" v-model="data.form.pre_maintain_time" placeholder="填写约定维护周期/天">
								<template #append>天</template>
							</el-input>
						</el-form-item>
						<el-form-item label="责任人" prop="responsibility_person_id"
							:rules="[{ required: true, message: '填写责任人', trigger: 'blur' }]">
							<el-select v-model="data.form.responsibility_person_id" placeholder="选择责任人">
								<el-option :label="item.real_name" :value="item.id" v-for="item in data.repertoryList" />
							</el-select>
						</el-form-item>
						<el-form-item label="参与人员" prop="participants_id"
							:rules="[{ required: true, message: '填写参与人员', trigger: 'blur' }]">
							<el-select v-model="data.form.participants_id" multiple placeholder="选择参与人员" clearable
								filterable :style="{ width: '70%' }">
								<el-option v-for="item in data.repertoryList" :key="item.id" :label="item.real_name"
									:value="item.id" />
							</el-select>
						</el-form-item>
						<el-form-item label="状态" prop="status"
							:rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]">
							<el-select v-model="data.form.status" placeholder="选择状态">
								<el-option :label="item[1]" :value="item[0]" v-for="item in statusList.data" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="项目开始时间" prop="project_start_date">
							<el-date-picker v-model="data.form.project_start_date" type="project_start_date"
								placeholder=" 填写项目开始时间" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
						</el-form-item>
						<el-form-item label="项目结束时间" prop="project_end_date">
							<el-date-picker v-model="data.form.project_end_date" type="project_end_date"
								placeholder="填写项目结束时间" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
						</el-form-item>
						<el-form-item label="开发开始时间" prop="dev_start_date">
							<el-date-picker v-model="data.form.dev_start_date" type="dev_start_date" placeholder=" 填写开发开始时间"
								value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
						</el-form-item>
						<el-form-item label="开发结束时间" prop="dev_end_date">
							<el-date-picker v-model="data.form.dev_end_date" type="dev_end_date" placeholder=" 填写开发结束时间"
								value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
						</el-form-item>
						<el-form-item label="维护开始时间" prop="maintain_start_date">
							<el-date-picker v-model="data.form.maintain_start_date" type="maintain_start_date"
								placeholder=" 填写维护开始时间" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
						</el-form-item>
						<el-form-item label="维护结束时间" prop="maintain_end_date">
							<el-date-picker v-model="data.form.maintain_end_date" type="maintain_end_date"
								placeholder=" 填写维护结束时间" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="height20"></div>
			<template #footer>
				<el-button type="default" @click="closePage">取消</el-button>
				<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
			</template>
		</el-dialog>
		<!-- 弹出项目详情-->
		<vuecmf-dialog width="800px" :model_value="data.dialogDetail.showDetail" :title="data.dialogDetail.titleDetail"
			@close="closePage">
			<template #content>
				<el-row>
					<el-col :span="10">
						<div style="position: fixed">
							<h3 class="mb20">项目详情表:</h3>
							<div m="4" class="ml20">
								<p class="mt10" m="t-0 b-2" style="display: flex;">
									项目参与人员:{{ data.form.participants?.join(',') }}</p>
								<p class="mt10" m="t-0 b-2">预估金额:
									<money :money="data.form.estimated_amount" />
								</p>
								<p class="mt10" m="t-0 b-2">约定开发周期: {{ data.form.pre_dev_time ?
									data.form.pre_dev_time : '暂无数据' }} 天</p>
								<p class="mt10" m="t-0 b-2">约定维护周期: {{ data.form.pre_maintain_time ?
									data.form.pre_maintain_time : '暂无数据' }} 天</p>
								<p class="mt10" m="t-0 b-2">项目周期开始时间: {{ data.form.project_start_date ?
									data.form.project_start_date : '暂无数据' }}</p>
								<p class="mt10" m="t-0 b-2">项目周期结束时间: {{ data.form.project_end_date
									? data.form.project_end_date : '暂无数据' }}</p>
								<p class="mt10" m="t-0 b-2">开发开始时间: {{ data.form.dev_start_date
									? data.form.dev_start_date : '暂无数据' }}</p>
								<p class="mt10" m="t-0 b-2">开发结束时间: {{ data.form.dev_end_date
									? data.form.dev_end_date : '暂无数据' }}</p>
								<p class="mt10" m="t-0 b-2">维护开始时间: {{ data.form.maintain_start_date ?
									data.form.maintain_start_date : '暂无数据' }}</p>
								<p class="mt10" m="t-0 b-2">维护结束时间: {{ data.form.maintain_end_date
									? data.form.maintain_end_date : '暂无数据' }}</p>
							</div>
						</div>
					</el-col>
					<el-col :span="14">
						<div style="height: 500px">
							<el-timeline>
								<el-timeline-item v-for="item in data.form.schedules" :timestamp="item.start_date"
									placement="top">
									<div v-for="items in data.stalist" class="ml5 mb10">
										<h3 v-if="item.status == items.key">{{ items.value }}</h3>
									</div>
									<el-card>
										<h3>{{ item.name }}</h3>
										<h4 class="mt5 mb10">{{ item.desc }}</h4>
										<p class=" mb10">{{ item.updater }}</p>
										<div class="text mb10">结束时间：{{ item.end_date }}</div>
										<div class="text">
											<el-button type="primary" @click="editSchedule(item)">编辑进度</el-button>
											<el-button type="danger" @click="deleteSchedule(item)">删除进度</el-button>
										</div>
									</el-card>
								</el-timeline-item>
								<el-timeline-item>
									<div class="flex justify-space-between mb-4 flex-wrap gap-4">
										<el-button type="primary" text @click="newSchedule(data.form)">新建进度</el-button>
									</div>
								</el-timeline-item>
							</el-timeline>
						</div>
					</el-col>
				</el-row>
				<div class="height20"></div>
			</template>
		</vuecmf-dialog>
		<!-- 弹出项目进度新增页面-->
		<vuecmf-dialog width="500px" :model_value="data.schedule.show" :title="data.schedule.title"
			@close="closeSchedulePage">
			<template #content>
				<el-form :model="data.formList" label-width="140px" ref="formRef" v-loading="data.schedule.isLoading">
					<el-form-item label="进度名称" prop="name"
						:rules="[{ required: true, message: '请填写进度名称', trigger: 'blur' }]">
						<el-input v-model="data.formList.name" placeholder="进度名称" />
					</el-form-item>
					<el-form-item label="进度内容" prop="desc"
						:rules="[{ required: true, message: '请填写进度内容', trigger: 'blur' }]">
						<el-input v-model="data.formList.desc" placeholder="进度内容" />
					</el-form-item>
					<el-form-item label="进度负责人" prop="updater_id"
						:rules="[{ required: true, message: '选择进度负责人', trigger: 'blur' }]">
						<el-select v-model="data.formList.updater_id" placeholder="选择进度负责人">
							<el-option :label="item.real_name" :value="item.id" v-for="item in data.repertoryList" />
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="start_date">
						<el-date-picker v-model="data.formList.start_date" type="start_date" placeholder=" 填写开始时间"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="结束时间" prop="end_date">
						<el-date-picker v-model="data.formList.end_date" type="end_date" placeholder=" 填写结束时间"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="进度状态" prop="status"
						:rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]">
						<el-select v-model="data.formList.status" placeholder="选择状态">
							<el-option :label="item.value" :value="item.key" v-for="item in data.stalist" />
						</el-select>
					</el-form-item>
					<el-form-item label="是否更新项目状态" prop="is_update_project_status"
						:rules="[{ required: true, message: '请更新状态', trigger: 'change' }]">
						<el-switch v-model="data.formList.is_update_project_status" class="ml-2" :active-value="1"
							:inactive-value="0" />
					</el-form-item>
					<el-form-item v-show="data.formList.is_update_project_status" label="完成后项目状态"
						prop="finish_project_status"
						:rules="[{ required: !!data.formList.is_update_project_status, message: '请选择完成状态', trigger: 'change' }]">
						<el-select v-model="data.formList.finish_project_status" placeholder="选择完成状态">
							<el-option :label="item[1]" :value="item[0]" v-for="item in statusList.data" />
						</el-select>
					</el-form-item>
					<el-form-item v-show="data.formList.is_update_project_status" label="进行中项目状态"
						prop="going_project_status">
						<el-select v-model="data.formList.going_project_status" placeholder="选择进行中状态">
							<el-option :label="item[1]" :value="item[0]" v-for="item in statusList.data" />
						</el-select>
					</el-form-item>
				</el-form>
				<div class="height20"></div>
			</template>
			<template #footer>
				<el-button type="default" @click="closeSchedulePage">取消</el-button>
				<el-button type="success" @click="submitSchedule(formRef)">提交</el-button>
			</template>
		</vuecmf-dialog>
		<!-- 弹出项目进度更新页面-->
		<vuecmf-dialog width="500px" :model_value="data.scheduleup.show" :title="data.scheduleup.title"
			@close="closeSchedulePage">
			<template #content>
				<el-form :model="data.formList" label-width="140px" ref="formRef" v-loading="data.scheduleup.isLoading">
					<el-form-item label="进度名称" prop="name"
						:rules="[{ required: true, message: '请填写进度名称', trigger: 'blur' }]">
						<el-input v-model="data.formList.name" placeholder="进度名称" />
					</el-form-item>
					<el-form-item label="进度内容" prop="desc"
						:rules="[{ required: true, message: '请填写进度内容', trigger: 'blur' }]">
						<el-input v-model="data.formList.desc" placeholder="进度内容" />
					</el-form-item>
					<el-form-item label="进度负责人" prop="updater_id"
						:rules="[{ required: true, message: '选择进度负责人', trigger: 'blur' }]">
						<el-select v-model="data.formList.updater_id" placeholder="选择进度负责人">
							<el-option :label="item.real_name" :value="item.id" v-for="item in data.repertoryList" />
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="start_date">
						<el-date-picker v-model="data.formList.start_date" type="start_date" placeholder=" 填写开始时间"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="结束时间" prop="end_date">
						<el-date-picker v-model="data.formList.end_date" type="end_date" placeholder=" 填写结束时间"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="状态" prop="status" :rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]">
						<el-select v-model="data.formList.status" placeholder="选择状态">
							<el-option :label="item.value" :value="item.key" v-for="item in data.stalist" />
						</el-select>
					</el-form-item>
					<el-form-item label="是否更新项目状态" prop="is_update_project_status"
						:rules="{ required: true, message: '请更新状态', trigger: 'blur' }">
						<el-switch v-model="data.formList.is_update_project_status" class="ml-2" :active-value="1"
							:inactive-value="0" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
					</el-form-item>
					<el-form-item v-show="data.formList.is_update_project_status" label="结束后项目状态"
						prop="finish_project_status"
						:rules="{ required: data.formList.is_update_project_status, message: '请选择结束状态', trigger: 'change' }">
						<el-select v-model="data.formList.finish_project_status" placeholder="选择结束状态">
							<el-option :label="item[1]" :value="item[0]" v-for="item in statusList.data" />
						</el-select>
					</el-form-item>
					<el-form-item v-show="data.formList.is_update_project_status" label="进行中项目状态"
						prop="going_project_status">
						<el-select v-model="data.formList.going_project_status" placeholder="选择进行中状态">
							<el-option :label="item[1]" :value="item[0]" v-for="item in statusList.data" />
						</el-select>
					</el-form-item>
				</el-form>
				<div class="height20"></div>
			</template>
			<template #footer>
				<el-button type="default" @click="closeSchedulePage">取消</el-button>
				<el-button type="primary" @click="submitScheduleUpdate()">更新</el-button>
			</template>
		</vuecmf-dialog>
		<!-- 弹出查看合同详情-->
		<vuecmf-dialog width="1200px" :model_value="data.contractDetail.showDetail" :title="data.contractDetail.titleDetail"
			@close="closePage">
			<template #content>
				<el-form :model="data.tableContract" inline-message="true" v-loading="data.contractDetail.isLoadingDetail">
					<el-table :data="data.tableContract" stripe style="width: 100%" label-width="120px">
						<el-table-column prop="title" label="合同名称" width="" />
						<el-table-column prop="client" label="甲方/客户" width="" />
						<el-table-column prop="developer" label="乙方/开发公司" width="" />
						<el-table-column prop="date" label="合同签署日期" width="">
							<template #default="{ row }">
								<el-text v-if="row.date">{{ row.date }}</el-text>
								<el-text v-else>暂无数据</el-text>
							</template>
						</el-table-column>
						<el-table-column prop="start_date" label="合同开始日期" width="">
							<template #default="{ row }">
								<el-text v-if="row.start_date">{{ row.start_date }}</el-text>
								<el-text v-else>暂无数据</el-text>
							</template>
						</el-table-column>
						<el-table-column prop="end_date" label="合同结束日期" width="">
							<template #default="{ row }">
								<el-text v-if="row.end_date">{{ row.end_date }}</el-text>
								<el-text v-else>暂无数据</el-text>
							</template>
						</el-table-column>
						<el-table-column prop="amount" label="合同金额/元" width="">
							<template #default="{ row }">
								<money :money="row.amount" />
							</template>
						</el-table-column>
						<el-table-column prop="attachment" label="附件" width="">
							<template #default="scope">
								<el-link v-if="scope.row.attachment" :href="scope.row.attachment" target="_blank"
									type="primary">查看附件</el-link>
								<el-link v-else target="_blank" type="info" disabled>暂无附件</el-link>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="">
							<template #default="scope">
								<el-button link type="primary" @click="editContract(scope.row)">更新</el-button>
								<el-button link type="danger" @click="deleteContract(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form>
			</template>
			<template #footer>
				<el-button type="primary" @click="newContract(data.formContract)">添加新合同</el-button>
				<el-button type="default" @click="closePage">取消</el-button>
			</template>
		</vuecmf-dialog>
		<!-- 弹出合同新增页面-->
		<vuecmf-dialog width="500px" :model_value="data.contract.show" :title="data.contract.title"
			@close="closeSchedulePage">
			<template #content>
				<el-form :model="data.formContract" label-width="120px" ref="formRef" v-loading="data.contract.isLoading">
					<el-form-item label="合同名称" prop="title"
						:rules="[{ required: true, message: '请填写合同名称', trigger: 'blur' }]">
						<el-input v-model="data.formContract.title" placeholder="合同名称" />
					</el-form-item>
					<el-form-item label="甲方/客户" prop="client"
						:rules="[{ required: true, message: '请填写甲方/客户', trigger: 'blur' }]">
						<el-input v-model="data.formContract.client" placeholder="甲方/客户" />
					</el-form-item>
					<el-form-item label="乙方/开发公司" prop="developer"
						:rules="[{ required: true, message: '请填写乙方/开发公司', trigger: 'blur' }]">
						<el-input v-model="data.formContract.developer" placeholder="乙方/开发公司" />
					</el-form-item>
					<el-form-item label="合同金额" prop="amount"
						:rules="[{ required: true, message: '请填写合同金额', trigger: 'blur' }]">
						<el-input type="number" v-model="data.formContract.amount" placeholder="合同金额">
							<template #append>元</template>
						</el-input>
					</el-form-item>
					<el-form-item label="合同签署日期" prop="date">
						<el-date-picker v-model="data.formContract.date" type="date" placeholder="合同签署日期"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="合同开始日期" prop="start_date">
						<el-date-picker v-model="data.formContract.start_date" type="start_date" placeholder="合同开始日期"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="合同结束日期" prop="end_date">
						<el-date-picker v-model="data.formContract.end_date" type="end_date" placeholder="合同结束日期"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="附件" prop="attachment">
						<el-button type="default" @click="importExcel()">上传附件</el-button>
						<el-text class="ml10">{{ data.attachMenttitle }}</el-text>
					</el-form-item>
				</el-form>
				<div class="height20"></div>
			</template>
			<template #footer>
				<el-button type="default" @click="closeSchedulePage">取消</el-button>
				<el-button type="success" @click="submitContract(formRef)">提交</el-button>
			</template>
		</vuecmf-dialog>
		<!-- 弹出合同更新页面-->
		<vuecmf-dialog width="500px" :model_value="data.contractup.show" :title="data.contractup.title"
			@close="closeSchedulePage">
			<template #content>
				<el-form :model="data.formContract" label-width="120px" ref="formRef" v-loading="data.contractup.isLoading">
					<el-form-item label="合同名称" prop="title"
						:rules="[{ required: true, message: '请填写合同名称', trigger: 'blur' }]">
						<el-input v-model="data.formContract.title" placeholder="合同名称" />
					</el-form-item>
					<el-form-item label="甲方/客户" prop="client"
						:rules="[{ required: true, message: '请填写甲方/客户', trigger: 'blur' }]">
						<el-input v-model="data.formContract.client" placeholder="甲方/客户" />
					</el-form-item>
					<el-form-item label="乙方/开发公司" prop="developer"
						:rules="[{ required: true, message: '请填写乙方/开发公司', trigger: 'blur' }]">
						<el-input v-model="data.formContract.developer" placeholder="乙方/开发公司" />
					</el-form-item>
					<el-form-item label="合同金额" prop="amount"
						:rules="[{ required: true, message: '请填写合同金额', trigger: 'blur' }]">
						<el-input v-model="data.formContract.amount" placeholder="合同金额" />
					</el-form-item>
					<el-form-item label="合同签署日期" prop="date">
						<el-date-picker v-model="data.formContract.date" type="date" placeholder="合同签署日期"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="合同开始日期" prop="start_date">
						<el-date-picker v-model="data.formContract.start_date" type="start_date" placeholder="合同开始日期"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="合同结束日期" prop="end_date">
						<el-date-picker v-model="data.formContract.end_date" type="end_date" placeholder="合同结束日期"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="附件" prop="attachment">
						<el-button type="default" @click="importExcel()">上传附件</el-button>
						<el-text class="ml10">{{ data.attachMenttitle }}</el-text>
					</el-form-item>
				</el-form>
				<div class="height20"></div>
			</template>
			<template #footer>
				<el-button type="default" @click="closeSchedulePage">取消</el-button>
				<el-button type="primary" @click="submitContractUpdate()">更新</el-button>
			</template>
		</vuecmf-dialog>
		<!-- 弹出状态新增的页面-->
		<vuecmf-dialog width="500px" :model_value="data.statusDialog.show" :title="data.statusDialog.title"
			@close="closePage">
			<template #content>
				<el-form :model="data.formStatus" label-width="150px" ref="formRef" v-loading="data.statusDialog.isLoading">
					<el-form-item label="状态值（英文）" prop="key">
						<el-input v-model="data.formStatus.key" placeholder="状态值" />
					</el-form-item>
					<el-form-item label="状态名（显示名）" prop="value">
						<el-input v-model="data.formStatus.value" placeholder="填写状态名" />
					</el-form-item>
				</el-form>
				<div class="height20"></div>
			</template>
			<template #footer>
				<el-button type="default" @click="closePage">取消</el-button>
				<el-button type="primary" @click="submitStatusForm">提交</el-button>
			</template>
		</vuecmf-dialog>
		<!-- 弹出状态更新的页面-->
		<vuecmf-dialog width="500px" :model_value="data.statusLog.show" :title="data.statusLog.title" @close="closePage">
			<template #content>
				<el-form :model="data.formStatus" label-width="120px" ref="formRef" v-loading="data.statusLog.isLoading">
					<el-form-item label="修改前状态名：" prop="value">
						<el-select v-model="data.formStatus.key" placeholder="选择状态">
							<el-option :label="item[1]" :value="item[0]" v-for="item in statusList.data" />
						</el-select>
					</el-form-item>
					<el-form-item label="状态值：" prop="key">
						<el-input v-model="data.formStatus.key" disabled :style="{ width: '215px' }" />
					</el-form-item>
					<el-form-item label="修改后状态名：" prop="value">
						<el-input v-model="data.formStatus.value" placeholder="新状态名" :style="{ width: '215px' }" />
					</el-form-item>
				</el-form>
				<div class="height20"></div>
			</template>
			<template #footer>
				<el-button type="default" @click="closePage">取消</el-button>
				<el-button type="primary" @click="editStatusForm">更新</el-button>
			</template>
		</vuecmf-dialog>
		<!-- 上传附件 -->
		<ImportExcelDialog ref="importExcelDialogRef" @refresh="getAttachment" />
	</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, computed, ref, defineAsyncComponent, nextTick } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import Repertory from '/@/api/model/Repertory'; //gzs:引入模型
import statusList from '/@/views/data/status';
import { ElMessage, ElMessageBox, genFileId } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { money, getMoneyCent } from '/@/utils/moneyHelper';
import { clone } from 'lodash'


import { clone } from 'lodash'
// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
const formRef = ref<FormInstance>();
const multipleSelection = ref([]);
let data = reactive({
	//请求项目查询的参数
	params: {
		pageSize: getThemeConfig.value.pageSize, //分页大小
		page: 1, //当前页面
		keyword: '', //关键字
		status: [], //状态
		responsibility_person_id: '',//负责人id
		create_time_begin_time: '',//开始创建时间
		create_time_end_time: '',//结束创建时间
		min_amount: '',//最小金额
		max_amount: '',//最大金额
		min_dev_time_days: '',//最小开发时间/天
		max_dev_time_days: '',//最大开发时间/天
		min_maintain_time_days: '',//最小维护时间/天
		max_maintain_time_days: '',//最大维护时间/天
	},
	//请求合同查询的参数
	contractParams: {
		pageSize: getThemeConfig.value.pageSize, //分页大小
		page: 1, //当前页面
		project_id: '', //项目id
	},
	//分页组件的变量
	pagination: {
		currentPage: 1,
		pageSize: getThemeConfig.value.pageSize,
		total: 100,
	},
	//项目新增和编辑弹出框
	dialog: {
		show: false, // 是否显示弹出框，用于最大化、最小化及还原
		title: '添加', // 弹出框标题
		isLoading: false, //是否加载中
	},
	//项目详情弹出框
	dialogDetail: {
		showDetail: false, // 是否显示弹出框，用于最大化、最小化及还原
		titleDetail: '添加', // 弹出框标题
		isLoadingDetail: false, //是否加载中
	},
	//新增进度弹出框
	schedule: {
		show: false, // 是否显示弹出框，用于最大化、最小化及还原
		title: '添加', // 弹出框标题
		isLoading: false, //是否加载中
	},
	//编辑进度弹出框
	scheduleup: {
		show: false, // 是否显示弹出框，用于最大化、最小化及还原
		title: '编辑', // 弹出框标题
		isLoading: false, //是否加载中
	},
	//合同详情弹出框
	contractDetail: {
		showDetail: false, // 是否显示弹出框，用于最大化、最小化及还原
		titleDetail: '添加', // 弹出框标题
		isLoadingDetail: false, //是否加载中
	},
	//新增合同弹出框
	contract: {
		show: false, // 是否显示弹出框，用于最大化、最小化及还原
		title: '添加', // 弹出框标题
		isLoading: false, //是否加载中
	},
	//编辑合同弹出框
	contractup: {
		show: false, // 是否显示弹出框，用于最大化、最小化及还原
		title: '编辑', // 弹出框标题
		isLoading: false, //是否加载中
	},
	//项目新增弹出框
	statusDialog: {
		show: false, // 是否显示弹出框，用于最大化、最小化及还原
		title: '添加', // 弹出框标题
		isLoading: false, //是否加载中
	},
	//项目编辑弹出框
	statusLog: {
		show: false, // 是否显示弹出框，用于最大化、最小化及还原
		title: '添加', // 弹出框标题
		isLoading: false, //是否加载中
	},
	//新建进度的状态
	stalist: [
		{
			value: '未开始',
			key: 'NOT_START',
		},
		{
			value: '进行中 ',
			key: 'GOING',
		},
		{
			value: '完成',
			key: 'FINISH',
		},
		{
			value: '跳过',
			key: 'SKIP',
		},
	] as any,
	loading: false, //是否加载中
	tableData: [], // 表格数据
	tableContract: [] as any, //合同数据
	attachMenttitle: '', //附件名
	form: {} as any, //新增和修改项目数据
	formList: {} as any, //新增和修改进度数据
	formContract: {} as any, //新增和修改合同数据
	formStatus: {} as any, //新增和修改状态数据
	repertoryList: [] as any,//参与人员列表
});
/**
 * 上传
 */
const ImportExcelDialog = defineAsyncComponent(() => import("/@/views/payrollModule/import.vue"));
const importExcelDialogRef = ref();
const importExcel = () => {
	importExcelDialogRef.value.openDialog();
};
//接收
const getAttachment = async (item: string) => {
	console.log("🚀 ~ file: repertory.vue:378 ~ getattachment ~ item:", item)
	nextTick(() => {
		data.formContract.attachment = item[0];
		data.attachMenttitle = item[1];
	})
};
/**
 * 实例化1个合同表单对象
 */
const newFormcontract = () => {
	let formcontract = {
		client: '',
		developer: '',
		title: '',
		amount: '',
		attachment: '',
		project_id: '',
		date: null,
		start_date: null,
		end_date: null,
	};
	return formcontract;
};
/**
 * 实例化1个项目表单对象
 */
const newForm = () => {
	let form = {
		desc: '',
		responsibility_person_id: '',
		name: '',
		source: '',
		participants_id: [],
		estimated_amount: '',
		status: '',
		pre_dev_time: '',
		pre_maintain_time: '',
		project_start_date: null,
		project_end_date: null,
		dev_start_date: null,
		dev_end_date: null,
		maintain_start_date: null,
		maintain_end_date: null,
	};
	return form;
};
/**
 * 实例化1个进度表单对象
 */
const newFormlist = () => {
	let formlist = {
		project_id: '',
		name: '',
		desc: '',
		updater_id: '',
		start_date: null,
		end_date: null,
		is_update_project_status: 1,
		status: '',
		finish_project_status: '',
		going_project_status: '',
	};
	return formlist;
};
/**
 * 实例化1个状态表单对象
 */
const newFormstatuslist = () => {
	let formstatus = {
		key: '',
		value: '',
	};
	return formstatus;
};
/**
 * 切换页面大小
 * @param val
 */
const handleSizeChange = (val: number) => {
	data.params.pageSize = val;
	getList();
	getContractList();
};
/**
 * 翻页
 */
const handleCurrentChange = (val: number) => {
	data.params.page = val;
	getList();
	getContractList();
};

const search = async () => {
	data.params.page = 1;
	await getList();
	await getContractList();
};
/**
 * 页面初始化方法，有就写逻辑，没有可以留空
 */
const init = async () => {
	await Repertory.statuslist({});

	let Repertoryres = await Repertory.all({});
	if (Repertoryres.code != 0) {
		return;
	}
	data.repertoryList = Repertoryres.data;

};
/**
 * 获取分页数据
 */
const getList = async () => {
	data.loading = true;
	const res = await Repertory.list({
		pageParams: {
			size: data.params.pageSize,
			page: data.params.page
		},
		keyword: data.params.keyword,
		status: data.params.status,
		responsibility_person_id: data.params.responsibility_person_id,
		create_time_begin_time: data.params.create_time_begin_time,
		create_time_end_time: data.params.create_time_end_time,
		min_amount: data.params.min_amount,
		max_amount: data.params.max_amount,
		min_dev_time_days: data.params.min_dev_time_days,
		max_dev_time_days: data.params.max_dev_time_days,
		min_maintain_time_days: data.params.min_maintain_time_days,
		max_maintain_time_days: data.params.max_maintain_time_days,
	});
	data.loading = false;
	if (res.code != 0) {
		return;
	}
	data.tableData = res.data.data;
	data.tableData.forEach((item: any) => {
		item.participants_id.forEach(i => i = Number(i))
	});
	console.log("🚀 ~ file: repertory.vue:835 ~ data.tableData.forEach ~ data.tableData:", data.tableData)
	//分页数据赋值
	data.pagination.total = res.data.total;
	data.pagination.currentPage = res.data.current_page;
	data.pagination.pageSize = res.data.per_page;
};
/**
 * 获取合同分页数据
 */
const getContractList = async () => {
	data.loading = true;
	const res = await Repertory.listcontract({
		pageParams: {
			size: data.contractParams.pageSize,
			page: data.contractParams.page
		},
		project_id: data.contractParams.project_id,
	});
	data.loading = false;
	if (res.code != 0) {
		return;
	}
	data.tableContract = res.data.data
};
// 翻页
const handleTableDataSelectionChange = (val: any) => {
	multipleSelection.value = val;
};
//=========添加 和 编辑 删除
/**
 * 关闭弹出框
 */
const closePage = () => {
	data.dialog.show = false;
	data.statusDialog.show = false;
	data.statusLog.show = false;
	data.dialogDetail.showDetail = false;
	data.contractDetail.showDetail = false;
};
const closeSchedulePage = () => {
	data.schedule.show = false;
	data.scheduleup.show = false;
	data.contract.show = false;
	data.contractup.show = false;
};
/**
 * 弹出新增状态页面
 */
const addstatus = () => {
	data.statusDialog.show = true;
	data.statusDialog.title = '添加状态';
	data.formStatus = newFormstatuslist();
};
/**
 * 弹出更新状态页面
 */
const editstatus = () => {
	data.statusLog.show = true;
	data.statusLog.title = '更新状态';
	data.formStatus = newFormstatuslist();
};
/**
 * 弹出新增项目页面
 */
const addPage = () => {
	data.dialog.show = true;
	data.dialog.title = '添加项目'; //gzs:标题
	data.form = newForm();
};
/**
 * 弹出编辑项目页面
 */
const edit = (item: any) => {
	data.form = item;
	data.dialog.title = '编辑项目';
	data.dialog.show = true;
};
/**
 * 获取项目详情
 */
const openDetail = (item: any) => {
	data.formList.project_id = item.id;
	data.form = item;
	data.dialogDetail.titleDetail = '项目详情';
	data.dialogDetail.showDetail = true;
};
/**
 * 弹出新增项目进度页面
 */
const newSchedule = async (item: any) => {
	console.log("🚀 ~ file: repertory.vue:810 ~ newSchedule ~ item:", item)
	data.schedule.show = true;
	data.schedule.title = '添加进度';
	data.formList = newFormlist();
	data.formList.project_id = item.id;
};
/**
 * 弹出编辑项目进度页面
 */
const editSchedule = async (item: any) => {
	console.log("🚀 ~ file: repertory.vue:820 ~ editSchedule ~ item:", item)
	data.formList = item;
	data.scheduleup.show = true;
	data.scheduleup.title = '编辑项目进度';
};
/**
 * 获取合同详情
 */
const openContract = async (item: any) => {
	data.formContract.project_id = item.id;
	data.contractParams.project_id = item.id;
	data.contractDetail.showDetail = true;
	data.contractDetail.titleDetail = '合同详情';
	await getContractList();
};
/**
 * 弹出新增合同页面
 */
const newContract = async (item: any) => {
	data.contract.show = true;
	data.contract.title = '添加合同';
	data.attachMenttitle = '';
	console.log("🚀 ~ file: repertory.vue:955 ~ newContract ~ item:", item)
	data.formContract = newFormcontract();
	data.formContract.project_id = item.project_id;
};
/**
 * 弹出编辑项目进度页面
 */
const editContract = async (item: any) => {
	data.contractup.show = true;
	data.contractup.title = '编辑合同';
	data.formContract = item;
};
/**
 * 提交项目表单，新增和修改
 */
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid) => {
		if (!valid) {
			console.log('error submit!');
			return false;
		}
		let res;
		data.dialog.isLoading = true;
		if (data.form?.id) {
			//如果是编辑
			res = await Repertory.edit(data.form);
		} else {
			res = await Repertory.add(data.form);
		}
		data.dialog.isLoading = false;
		if (res.code != 0) {
			return;
		}
		ElMessage.success(res.msg);
		search();
		closePage();
	});
};
/**
 * 提交进度表单，新增
 */
const submitSchedule = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid) => {
		if (!valid) {
			console.log('error submit!');
			return false;
		}
		data.schedule.isLoading = true;
		let res = await Repertory.addschedules(data.formList);
		data.schedule.isLoading = false;
		if (res.code != 0) {
			return;
		}
		ElMessage.success(res.msg);
		search();
		closeSchedulePage();
		closePage();
	});
};
/**
 * 提交进度表单，编辑
 */
const submitScheduleUpdate = async () => {
	data.schedule.isLoading = true;
	let res = await Repertory.editschedules(data.formList);
	data.schedule.isLoading = false;
	if (res.code != 0) {
		return;
	}
	ElMessage.success(res.msg);
	search();
	closeSchedulePage();
	closePage();
};
/**
 * 提交合同表单，新增
 */
const submitContract = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid) => {
		if (!valid) {
			console.log('error submit!');
			return false;
		}
		// 修改为分
		const contract = clone(data.formContract)
		contract.amount = getMoneyCent(data.formContract.amount)

		data.contract.isLoading = true;
		let res = await Repertory.addcontract(contract);
		data.contract.isLoading = false;
		if (res.code != 0) {
			return;
		}
		ElMessage.success(res.msg);
		search();
		closeSchedulePage();
		closePage();
	});
};
/**
 * 提交合同表单，编辑
 */
const submitContractUpdate = async () => {
	// 修改为分
	const contract = clone(data.formContract)
	contract.amount = getMoneyCent(data.formContract.amount)

	data.contract.isLoading = true;
	let res = await Repertory.editcontract(contract);
	data.contract.isLoading = false;
	if (res.code != 0) {
		return;
	}
	ElMessage.success(res.msg);
	search();
	closeSchedulePage();
	closePage();
};
/**
 * 提交状态表单，新增
 */
const submitStatusForm = async () => {
	data.statusDialog.isLoading = true;
	let res = await Repertory.addstatus(data.formStatus);
	data.statusDialog.isLoading = false;
	if (res.code != 0) {
		return;
	}
	ElMessage.success(res.msg);
	search();
	init();
	closePage();
	getList();
};
/**
 * 提交状态表单，更新
 */
const editStatusForm = async () => {
	data.statusLog.isLoading = true;
	let res = await Repertory.editstatus(data.formStatus);
	data.statusLog.isLoading = false;
	if (res.code != 0) {
		return;
	}
	ElMessage.success(res.msg);
	search();
	closePage();
	getList();
	init();
};
//删除项目数据
const deleteOne = (item: any) => {
	ElMessageBox.confirm('删除后不可恢复，确定要删除该记录吗？', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			doDelete([item.id]);
		})
		.catch(() => { });
};
//删除进度数据
const deleteSchedule = (item: any) => {
	ElMessageBox.confirm('删除后不可恢复，确定要删除该记录吗？', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			scheduleDelete([item.id]);
		})
		.catch(() => { });
};
//删除合同数据
const deleteContract = (item: any) => {
	ElMessageBox.confirm('删除后不可恢复，确定要删除该记录吗？', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			doDeleteContract([item.id]);
		})
		.catch(() => { });
};
//执行删除项目请求
const doDelete = async (ids: any) => {
	data.loading = true;
	let res = await Repertory.delete(ids);
	data.loading = false;
	if (res.code != 0) {
		return;
	}
	await getList();
};
//执行删除进度请求
const scheduleDelete = async (ids: any) => {
	data.loading = true;
	let res = await Repertory.deleteschedules(ids);
	data.loading = false;
	if (res.code != 0) {
		return;
	}
	search();
	closeSchedulePage();
	closePage();
};
//执行删除合同请求
const doDeleteContract = async (ids: any) => {
	data.loading = true;
	let res = await Repertory.deletecontract(ids);
	data.loading = false;
	if (res.code != 0) {
		return;
	}
	search();
	closeSchedulePage();
	closePage();
};
//=========页面事件
/**
 * 页面加载时事件
 */
onMounted(async () => {
	getList();
	init();
});
</script>
<style scoped lang="scss">.text {
	text-align: right;
}</style>