cnas/client/src/views/project/project.vue

319 lines
11 KiB
Python

<template>
<div class="app-container">
<el-tabs>
<el-tab-pane label="认证项目">
<div>
<el-button type="primary" @click="genProject0" size="mini">新建项目</el-button>
</div>
<el-table
v-loading="listLoading"
:data="projectData.results"
style="width: 100%;margin-top:10px;"
border
fit
stripe
highlight-current-row
max-height="600"
>
<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.status}}</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="操作">
<template slot-scope="scope">
<el-button-group>
<el-button
v-if="scope.row.status == '创建中'"
type="warning"
size="small"
:disabled="!checkPermission(['project_assign'])"
@click="handleNext(scope)"
>转策划</el-button>
<el-button
type="primary"
size="small"
:disabled="!checkPermission(['project_update'])"
@click="handleUpdate(scope)"
>编辑</el-button>
<el-button
type="danger"
size="small"
:disabled="!checkPermission(['project_delete'])"
@click="handleDelete(scope)"
>删除</el-button>
</el-button-group>
</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_"
/>
</el-tab-pane>
<el-tab-pane label="待处理业务">
<div>
<el-button type="primary" @click="genProject" size="mini">生成项目</el-button>
</div>
<div style="margin-top:10px">
<template>
已选择<span style="color:red;font-weight:bold">{{certapps_data.length}}</span>条已受理业务
</template>
</div>
<el-table
ref="projectTable"
v-loading="listLoading"
:data="certappData.results"
style="width: 100%;margin-top:10px;"
border
fit
stripe
highlight-current-row
max-height="600"
@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="认证领域/分类">
<template slot-scope="scope">
<el-tag>{{scope.row.cert_field_.name}}</el-tag>
<el-tag
v-if="scope.row.cccpv_class_"
type="warning"
style="margin:2px"
>{{scope.row.cccpv_class_.name}}</el-tag>
</template>
</el-table-column>
<el-table-column label="申请信息" width="300px">
<template slot-scope="scope">
<div>
<span style="color:darkblue;font-weight:bold">申请方</span>
:{{ scope.row.applicant_v.name }}
</div>
<div v-if="scope.row.manufacture">
<span style="color:darkblue;font-weight:bold">制造商</span>
:{{ scope.row.manufacture_v.name }}
</div>
<div v-if="scope.row.factory">
<span style="color:darkblue;font-weight:bold">生产厂</span>
:{{ scope.row.factory_v.name }}
</div>
</template>
</el-table-column>
<el-table-column label="当前状态">
<template slot-scope="scope">{{ scope.row.status}}</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="certappData.count>0"
:total="certappData.count"
:page.sync="listQuery.page"
:limit.sync="listQuery.page_size"
@pagination="getCertappList_"
/>
</el-tab-pane>
</el-tabs>
<el-dialog :visible.sync="dialogvisible_project" title="创建项目">
<el-form ref="elForm" :model="formData" label-width="80px" label-position="right" :rules="rules">
<div v-if="certapps_data.length > 0">已选择<span style="color:red;font-weight:bold">{{certapps_data.length}}</span>条已受理业务</div>
<el-form-item label="受审核方" prop="auditee">
<el-input placeholder="请选择受审核方" readonly clearable v-model="formData.auditee_v.name">
<el-button slot="append" icon="el-icon-search" @click="choose(0)" v-if="certapps_data.length == 0"></el-button>
</el-input>
</el-form-item>
<el-form-item label="联系人" prop="auditee_v.linkman_name">
<el-input v-model="formData.auditee_v.linkman_name"></el-input>
</el-form-item>
<el-form-item label="联系方式" prop="auditee_v.linkman_mobile">
<el-input v-model="formData.auditee_v.linkman_mobile"></el-input>
</el-form-item>
<el-form-item label="备注" prop="username">
<el-input v-model="formData.remark" type="textarea"
:autosize="{ minRows: 6, maxRows: 10}"></el-input>
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogvisible_project=false">取消</el-button>
<el-button type="primary" @click="confirm('Form')">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getCertappList } from "@/api/certapp";
import { getProjectList, createProject, nextProject } 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";
export default {
components: { Pagination, Treeselect },
data() {
return {
certapps_data:[],
certappData: [],
listLoading: true,
listQuery: {
page:1,
page_size:20,
status: "已受理",
},
listQuery_project: {
page:1,
page_size:20
},
deptOptions: [],
field_list: [],
projectData:{count:0,results:[]},
formData:{
certapps:[],
auditee_v:{},
auditee:null
},
dialogvisible_project:false,
rules: {
auditee: [
{
required: true,
message: "请选择受审核方",
trigger: "change",
},
],
},
};
},
watch:{
certapps_data:function(val){
let certapps = []
for(let i=0;i<val.length;i++){
certapps.push(val[i].id)
}
this.formData.certapps = certapps
}
},
created() {
this.getCertappList_();
this.getProjectList_()
},
methods: {
checkPermission,
getCertappList_() {
this.listLoading = true;
getCertappList(this.listQuery).then((response) => {
if (response.data) {
this.certappData = response.data;
}
this.listLoading = false;
});
},
getProjectList_() {
this.listLoading = true;
getProjectList(this.listQuery_project).then((response) => {
if (response.data) {
this.projectData = response.data;
}
this.listLoading = false;
});
},
getdeptOptions() {
getOrgList().then((res) => {
this.deptOptions = genTree(res.data);
});
},
resetFilter() {
this.listQuery = {
status: "已受理",
};
this.getCertappList_();
},
handleFilter() {
this.getCertappList_();
},
genProject() {
if(this.certapps_data.length >0){
this.dialogvisible_project = true
this.formData.auditee = this.certapps_data[0].applicant
this.formData.auditee_v = this.certapps_data[0].applicant_v
}else{
this.$message.warning('请先选择已受理业务')
}
},
genProject0() {
this.$refs['projectTable'].clearSelection()
this.dialogvisible_project = true
},
handleSelectionChange(val){
this.certapps_data = val
},
confirm(){
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO 提交表单
createProject(this.formData).then(res=>{
this.getCertappList_()
this.getProjectList_()
this.dialogvisible_project = false
this.$message.success('成功')
})
})
},
handleNext(scope) {
if(scope.row.certapps.length == 0){
this.$message.error('该项目不包含业务,无法继续!')
}else{
this.$confirm("确定转入策划派差吗?", "提示", {
type: "warning",
}).then(() => {
nextProject(scope.row.id, {}).then(res=>{
this.$message.success('成功')
this.getProjectList_()
})
}).catch(()=>{
});
}
}
},
};
</script>