cnas/client/src/views/plan/plan.vue

440 lines
14 KiB
Python

<template>
<div class="app-container">
<el-row :gutter="6">
<el-col :xs="24" :md="8">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>月计划</span>
(当前选择:
<span style="color:darkblue;font-weight:bold">{{nowPlan.name}}</span>
)
</div>
<div>
<div>
<el-button type="primary" @click="handleCreatePlan" size="mini">新建计划</el-button>
</div>
<el-table
v-loading="listLoadingplan"
:data="planData.results"
style="width: 100%;margin-top:2px;"
border
fit
stripe
highlight-current-row
height="300"
@row-click="planClick"
>
<el-table-column label="计划名称">
<template slot-scope="scope" v-if="scope.row.name">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
:disabled="!checkPermission(['plan_update'])"
@click="handleUpdatePlan(scope)"
icon="el-icon-edit"
></el-button>
<el-button
type="danger"
size="mini"
:disabled="!checkPermission(['plan_delete'])"
@click="handleDeletePlan(scope)"
icon="el-icon-delete"
></el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="planData.count>0"
:total="planData.count"
:page.sync="listQuery_plan.page"
:limit.sync="listQuery_plan.page_size"
@pagination="getPlanList_"
/>
</div>
</el-card>
</el-col>
<el-col :xs="24" :md="16">
<el-card class="box-card" style="margin-top:2px">
<div slot="header" class="clearfix">
<span>待策划项目</span>
</div>
<div>
<div style="margin-bottom:2px">
<el-button type="primary" @click="handleAppend" size="mini">添加到计划</el-button>
</div>
<el-table
v-loading="listLoading"
:data="projectData.results"
style="width: 100%;"
border
fit
stripe
highlight-current-row
height="300"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="项目号">
<template slot-scope="scope" v-if="scope.row.number">{{ scope.row.number }}</template>
</el-table-column>
<el-table-column label="受审核方" width="300px">
<template slot-scope="scope">{{ scope.row.auditee_v.name }}</template>
</el-table-column>
<el-table-column label="项目信息" width="300px" :show-overflow-tooltip="true">
<template slot-scope="scope" v-if="scope.row.certapps">
<el-tag
v-for="(item, index) in scope.row.certapps"
:key="index"
style="margin:2px"
>{{item}}</el-tag>
</template>
</el-table-column>
<el-table-column label="当前状态">
<template slot-scope="scope">{{ scope.row.state}}</template>
</el-table-column>
<el-table-column label="创建人">
<template slot-scope="scope">{{ scope.row.create_by_.name}}</template>
</el-table-column>
<el-table-column label="创建日期" >
<template slot-scope="scope">
<span>{{ scope.row.create_time }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="projectData.count>0"
:total="projectData.count"
:page.sync="listQuery_project.page"
:limit.sync="listQuery_project.page_size"
@pagination="getProjectList_"
/>
</div>
</el-card>
</el-col>
</el-row>
<el-row>
<el-card class="box-card" style="margin-top:2px">
<div slot="header" class="clearfix">
<span>月计划项目</span>
(当前选择:
<span style="color:darkblue;font-weight:bold">{{nowPlan.name}}</span>
)
</div>
<div>
<el-table
v-loading="listLoadingplan2"
:data="projectData2.results"
style="width: 100%;"
border
fit
stripe
highlight-current-row
height="300"
>
<el-table-column label="项目号">
<template slot-scope="scope" v-if="scope.row.number">{{ scope.row.number }}</template>
</el-table-column>
<el-table-column label="受审核方" width="300px">
<template slot-scope="scope">{{ scope.row.auditee_v.name }}</template>
</el-table-column>
<el-table-column label="项目信息" width="300px" :show-overflow-tooltip="true">
<template slot-scope="scope" v-if="scope.row.certapps">
<el-tag
v-for="(item, index) in scope.row.certapps"
:key="index"
style="margin:2px"
>{{item}}</el-tag>
</template>
</el-table-column>
<el-table-column label="当前状态">
<template slot-scope="scope">{{ scope.row.state}}</template>
</el-table-column>
<el-table-column label="是否可派差">
<template slot-scope="scope">
<el-switch v-model="scope.row.can_paichai" disabled></el-switch>
</template>
</el-table-column>
<el-table-column label="创建人">
<template slot-scope="scope">{{ scope.row.create_by_.name}}</template>
</el-table-column>
<el-table-column label="创建日期" >
<template slot-scope="scope">
<span>{{ scope.row.create_time }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="260" fixed="right">
<template slot-scope="scope">
<el-button
v-if="scope.row.state =='策划中'"
type="primary"
size="small"
:disabled="!checkPermission(['project_update'])"
@click="planProject(scope)"
>计划</el-button>
<el-button
v-if="scope.row.state =='策划中'"
type="plain"
size="small"
:disabled="!checkPermission(['project_assgin'])||!scope.row.can_paichai"
@click="assginProject(scope)"
>任务下达</el-button>
<el-button
size="small"
:disabled="!checkPermission(['project_delete'])"
@click="handleDetailProject(scope)"
>详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="projectData2.count>0"
:total="projectData2.count"
:page.sync="listQuery2.page"
:limit.sync="listQuery2.page_size"
@pagination="getProjectList_2"
/>
</div>
</el-card>
</el-row>
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='update'?'编辑':'新增'">
<el-form
ref="elForm"
:model="formData"
label-width="80px"
label-position="right"
:rules="rules"
>
<el-form-item label="计划名称" prop="name">
<el-input v-model="formData.name" placeholder="名称" />
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
<el-button type="primary" @click="confirmPlan('Form')">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getCertappList } from "@/api/certapp";
import { getPlanList, createPlan, updatePlan, deletePlan } from "@/api/plan";
import {
getProjectList,
createProject,
assginProject,
planProject,
} from "@/api/project";
import Pagination from "@/components/Pagination";
import checkPermission from "@/utils/permission";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { genTree } from "../../utils";
import router from "@/router";
export default {
components: { Pagination, Treeselect },
data() {
return {
listLoading: false,
listLoadingplan: false,
listLoadingplan2: false,
listQuery_plan: {
page: 1,
page_size: 20,
},
listQuery_project: {
page: 1,
page_size: 20,
state: "待策划",
planoff: true,
},
listQuery2: {
page: 1,
page_size: 20,
plan: "",
},
planData: { count: 0, results: [] },
projectData: { count: 0, results: [] },
projectData2: { count: 0, results: [] },
dialogVisible: false,
dialogType: "create",
formData: {},
nowPlan: { id: 0 },
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
multipleSelection: [],
multiprojects: [],
};
},
watch: {},
created() {
this.getProjectList_();
this.getPlanList_();
},
methods: {
checkPermission,
getProjectList_() {
this.listLoading = true;
getProjectList(this.listQuery_project).then((response) => {
if (response.data) {
this.projectData = response.data;
}
this.listLoading = false;
});
},
getPlanList_() {
this.listLoadingplan = true;
getPlanList(this.listQuery_plan)
.then((res) => {
this.planData = res.data;
this.listLoadingplan = false;
if (res.data && res.data.results.length) {
this.nowPlan = res.data.results[0];
this.listQuery2.plan = res.data.results[0].id;
this.getProjectList_2();
}
})
.catch((e) => {
this.listLoadingplan = false;
});
},
resetFilter() {
this.listQuery = {
state: "已受理",
};
this.getCertappList_();
},
handleFilter() {
this.getCertappList_();
},
planProject(scope) {
this.$router.push({
name: "PlanProject",
params: { id: scope.row.id },
});
},
handleCreatePlan() {
this.dialogVisible = true;
this.dialogType = "create";
},
handleUpdatePlan(scope) {
this.formData = Object.assign({}, scope.row);
this.dialogType = "update";
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs["elForm"].clearValidate();
});
},
handleDeletePlan(scope) {
this.$confirm("确定删除该计划?", "警告", { type: "warning" })
.then(() => {
deletePlan(scope.row.id).then((res) => {
this.getPlanList_()
this.$message.success("成功");
});
})
.catch((res) => {});
},
handleDetailProject(scope) {
this.$router.push({
name: "PlanProject",
params: { id: scope.row.id },
});
},
confirmPlan() {
this.$refs["elForm"].validate((valid) => {
if (valid) {
const isEdit = this.dialogType === "update";
if (isEdit) {
updatePlan(this.formData.id, this.formData).then(() => {
this.getPlanList_();
this.dialogVisible = false;
this.$message.success("成功");
});
} else {
createPlan(this.formData).then((res) => {
// this.org = res.data
// this.tableData.unshift(this.org)
this.getPlanList_();
this.dialogVisible = false;
this.$message.success("成功");
});
}
} else {
return false;
}
});
},
handleSelectionChange(val) {
var ddd = [];
for (var i = 0; i < val.length; i++) {
ddd.push(val[i].id);
}
this.multiprojects = ddd;
},
handleAppend() {
if (this.multiprojects.length > 0) {
if (this.nowPlan.id != 0) {
this.$confirm(
"是否将该项目添加至(" + this.nowPlan.name + ")中",
"提示",
{}
)
.then(() => {
planProject({
plan: this.nowPlan.id,
projects: this.multiprojects,
}).then((res) => {
this.$message.success("成功");
this.getProjectList_();
this.getProjectList_2();
});
})
.catch((res) => {});
} else {
this.$message.warning("请先选择一个计划");
}
} else {
this.$message.warning("请先选择待策划项目");
}
},
planClick(row, column, event) {
if (this.nowPlan.id != row.id) {
this.nowPlan = row;
this.listQuery2.plan = row.id;
this.listQuery2.page = 1;
this.getProjectList_2();
} else {
this.nowPlan = row;
this.listQuery2.plan = row.id;
this.getProjectList_2();
}
},
getProjectList_2() {
this.listLoadingplan2 = true;
getProjectList(this.listQuery2).then(res=>{
// console.log(res.data)
this.projectData2 = res.data
this.listLoadingplan2 = false
}).catch(e=>{
this.listLoadingplan2 = false
})
},
assginProject(scope) {
this.$confirm("确定下达审核任务?", "警告", { type: "warning" }).then(
() => {
assginProject(scope.row.id).then((res) => {
this.$message.success("成功");
this.getProjectList_2();
});
}
).catch(e=>{})
},
},
};
</script>