<template>
<div class="water-analysis-page">
<div class="top">
<el-form ref="ruleForm" inline :model="FormList" v-show="showSearch">
<el-form-item label="项目名称:" prop="projectName">
<el-input
clearable
v-model="FormList.projectName"
placeholder="请输入项目名称"
style="width: 240px"
></el-input>
</el-form-item>
<el-form-item label="项目运作模式:" prop="projectOperationPattern">
<el-select
clearable
v-model="FormList.projectOperationPattern"
placeholder="请选择项目运作模式"
>
<el-option
v-for="dict in project_operation_pattern"
:key="dict.stCode"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="招标方式:" prop="designUnit">
<el-select
clearable
v-model="FormList.designUnit"
placeholder="请选择招标方式"
>
<el-option
v-for="dict in fromMoney"
:key="dict.stCode"
:label="dict.stName"
:value="dict.stCode"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="责任人:" prop="chargeUser">
<el-input
clearable
v-model="FormList.chargeUser"
style="width: 200px"
placeholder="请输入责任人"
></el-input>
</el-form-item>
<el-form-item label="审核状态:" prop="auditStatus">
<el-select
clearable
v-model="FormList.auditStatus"
placeholder="请选择审核状态"
>
<el-option
v-for="dict in statusOption"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="项目变更类型:" prop="operation">
<el-select
clearable
v-model="FormList.operation"
placeholder="项目变更类型"
>
<el-option
v-for="dict in lcProject"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="searchForm">
查询</el-button
>
<el-button icon="Refresh" @click="resectClcik"> 重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar
v-model:showSearch="showSearch"
@queryTable="searchForm"
></right-toolbar>
</el-row>
</div>
<el-tabs
v-model="activeName"
class="demo-tabs"
@tab-click="handleClick"
style="margin-top: -10px"
type="border-card"
>
<el-tab-pane label="待办列表" name="todo">
<el-table
:data="tableData"
v-loading="dataForm.tableLoading"
stripe
max-height="500"
>
<el-table-column
type="index"
width="80"
align="center"
label="序号"
></el-table-column>
<el-table-column
:label="i.label"
align="center"
v-for="i in projectChangesCloum"
:key="i.props"
:prop="i.props"
show-overflow-tooltip
>
<template #default="{ row }" v-if="i.props == 'operation'">
<span>{{ row.operation == "update" ? "修改" : "删除" }}</span>
</template>
<template
#default="{ row }"
v-if="i.props == 'phone'"
show-overflow-tooltip
>
<span :title="row.phone">{{
row.phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
}}</span>
</template>
<template #default="{ row }" v-if="i.props == 'auditStatus'">
<span
:style="{
color:
row.auditStatus == 0
? '#e6a23c'
: row.auditStatus == 2
? '#409eff'
: 'red',
}"
>{{
row.auditStatus == 0
? "待审批"
: row.auditStatus == 2
? "审批通过"
: "审批驳回"
}}</span
>
</template>
<template #default="{ row }" v-if="i.props == 'projectOperationPattern'">
<dict-tag :options="project_operation_pattern" :value="row.projectOperationPattern" />
</template>
<template #default="{ row }" v-if="i.props == 'constructUnit'">
{{ unit_listM(row.constructUnit) }}
</template>
</el-table-column>
<!-- <el-table-column
label="流程步骤"
align="center"
prop="status"
show-overflow-tooltip
>
<template #default="{ row }">
<span style="color: red" v-if="row.fromStatus">驳回</span>
<dict-tag
v-else
:options="dangerous_status"
:value="row.status"
/>
</template>
</el-table-column> -->
<el-table-column
fixed="right"
label="操作"
width="210"
align="center"
>
<template #default="{ row }">
<el-button
link
type="primary"
icon="View"
@click="onCheck(row, 2, '查看')"
>查看</el-button
>
<el-button
link
type="success"
icon="Edit"
@click="onCheck(row, 3, '审核')"
>审核</el-button
>
<!-- <el-button
v-show="row.status == 1"
link
icon="Delete"
type="danger"
@click="onCheck(row, 1)"
>删除</el-button
> -->
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="已办列表" name="done">
<el-table
:data="tableData"
v-loading="dataForm.tableLoading"
stripe
max-height="500"
>
<el-table-column
type="index"
width="80"
align="center"
label="序号"
></el-table-column>
<el-table-column
:label="i.label"
align="center"
v-for="i in projectChangesCloum"
:key="i.props"
:prop="i.props"
show-overflow-tooltip
>
<template #default="{ row }" v-if="i.props == 'operation'">
<span>{{ row.operation == "update" ? "修改" : "删除" }}</span>
</template>
<template #default="{ row }" v-if="i.props == 'phone'">
<span>{{
row.phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
}}</span>
</template>
<template #default="{ row }" v-if="i.props == 'auditStatus'">
<span
:style="{
color:
row.auditStatus == 0
? '#e6a23c'
: row.auditStatus == 2
? '#409eff'
: 'red',
}"
>{{
row.auditStatus == 0
? "待审批"
: row.auditStatus == 2
? "审批通过"
: "审批驳回"
}}</span
>
</template>
<template #default="{ row }" v-if="i.props == 'projectOperationPattern'">
<dict-tag :options="project_operation_pattern" :value="row.projectOperationPattern" />
</template>
<template #default="{ row }" v-if="i.props == 'constructUnit'">
{{ unit_listM(row.constructUnit) }}
</template>
</el-table-column>
<!-- <el-table-column
label="流程步骤"
align="center"
prop="status"
show-overflow-tooltip
>
<template #default="{ row }">
<span style="color: red" v-if="row.fromStatus">驳回</span>
<dict-tag
v-else
:options="dangerous_status"
:value="row.status"
/>
</template>
</el-table-column> -->
<el-table-column
fixed="right"
label="操作"
width="210"
align="center"
>
<template #default="{ row }">
<el-button
link
icon="View"
type="primary"
@click="onCheck(row, 2, '查看')"
>查看</el-button
>
<!-- <el-button
link
type="success"
icon="Edit"
@click="onCheck(row, 3, '审核')"
>审核</el-button
> -->
<!-- <el-button
link
icon="Delete"
type="danger"
@click="onCheck(row, 1)"
>删除</el-button
> -->
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<pagination
v-show="FormList.totals > 0"
:total="FormList.totals"
v-model:page="FormList.pageNum"
v-model:limit="FormList.pageSize"
@pagination="getInfoList(FormList)"
/>
<el-dialog
v-model="visible"
:title="tittle + '项目变更'"
:modal-append-to-body="false"
:close-on-click-modal="false"
width="82%"
>
<tableDalgo
ref="tableDalgoRef"
:List="List"
@closed="closed"
:isSHow="isSHow"
v-if="visible"
></tableDalgo>
<template #footer>
<div class="dialog-footer">
<el-button v-show="isSHow == 3" type="primary" @click="submit(1)"
>通过</el-button
>
<el-button v-show="isSHow == 3" type="danger" @click="submit(2)"
>驳回</el-button
>
<el-button @click="visible=false">关闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { changePage, projectChangeRecordDelete } from "@/api/projectChanges";
import { projectCompany } from "@/api/projectTable";
import tableDalgo from "./tableDalgo.vue";
import { projectChangesCloum,statusOption,lcProject } from "@/utils/cloums";
let visible = ref(false);
const showSearch = ref(true);
const ruleForm = ref(null);
const activeName = ref("todo");
const tableDalgoRef = ref();
const { proxy } = getCurrentInstance();
import emgBox from "@/utils/ElMessageBox";
const unit_list = ref([]);
const { dangerous_status, project_operation_pattern } = proxy.useDict(
"dangerous_status",
"project_operation_pattern"
);
const FormList = reactive({
pageNum: 1,
pageSize: 10,
queryScope: "todo",
});
let dataForm = reactive({
date: new Date(),
tableData: "",
tableDateTwo: "",
tableLoading: true,
});
let tableData = ref();
const projectCompanyM = async () => {
let { data } = await projectCompany();
unit_list.value = data;
};
function unit_listM(v) {
const arr = unit_list.value.filter((i) => {
return v == i.id;
});
return arr[0]?.unitName;
}
//获取列表数据
const getInfoList = async (prams) => {
dataForm.tableLoading = true;
let { data, total } = await changePage(prams);
dataForm.tableLoading = false;
nextTick(()=>{
tableData.value = data;
FormList.totals = total;
})
};
// 查看上报数据
let List = reactive();
let isSHow = ref(0);
let tittle = ref("");
const onCheck = (id, type, t) => {
tittle.value = t;
List = { id, type };
if (type == 1) {
emgBox(id.id, projectInfoDeleteM, "您确定删除项目信息吗？");
} else {
visible.value = true;
isSHow.value = type;
}
};
const projectInfoDeleteM = async (id) => {
let { code } = await projectChangeRecordDelete(id);
getInfoList(FormList);
};
function closed() {
visible.value = false;
getInfoList(FormList);
}
//搜索
const searchForm = () => {
getInfoList(FormList);
};
//重置
const resectClcik = () => {
ruleForm.value.resetFields();
getInfoList(FormList);
};
function handleClick({ props: { name } }) {
FormList.queryScope = name;
getInfoList(FormList);
}
function submit(v) {
tableDalgoRef.value.checkClick(v);
}
onMounted(() => {
getInfoList(FormList);
projectCompanyM();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
padding: 20px;
border: 1px solid #ddd;
height: 90vh;
.top {
margin-bottom: 15px;
}
.el-input__inner {
// color: #fff;//
}
}
:deep(.el-dialog__body) {
// padding: 0px !important;
background-color: #eef1fb;
height: 750px;
overflow: auto;
}
</style>
