596 lines
20 KiB
Python
596 lines
20 KiB
Python
<template>
|
|
<div class="app-container">
|
|
<el-card>
|
|
<div>
|
|
<el-select v-model="listQuery.证书方案" @change="planChange" placeholder="证书方案">
|
|
<el-option v-for="item in planOption" :key="item" :label="item" :value="item"></el-option>
|
|
</el-select>
|
|
<el-input
|
|
v-model="listQuery.search"
|
|
placeholder="姓名/证书号/单位/培训日期"
|
|
style="width: 300px"
|
|
class="filter-item"
|
|
@keyup.enter.native="handleFilter"
|
|
/>
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="handleFilter"
|
|
>搜索</el-button
|
|
>
|
|
</div>
|
|
<div style="margin-top: 6px">
|
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-if="checkPermission(['certificate'])"
|
|
>新增证书</el-button>
|
|
<el-button @click="openBatchEditDialog" type="primary">批量修改</el-button>
|
|
<!-- <el-popover
|
|
placement="top"
|
|
width="160"
|
|
v-if="checkPermission(['certificate'])"
|
|
v-model="popovervisible"
|
|
>
|
|
<p>导入09证书</p>
|
|
<div style="text-align: left; margin: 0">
|
|
<el-upload
|
|
:action="upUrl"
|
|
:on-success="handleUploadSuccess"
|
|
accept=".xlsx"
|
|
:headers="upHeaders"
|
|
:show-file-list="false"
|
|
>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
@click="popovervisible = false"
|
|
>上传导入</el-button
|
|
>
|
|
</el-upload>
|
|
</div>
|
|
<el-button slot="reference">导入09证书</el-button>
|
|
</el-popover> -->
|
|
<el-popover
|
|
placement="top"
|
|
width="160"
|
|
v-if="checkPermission(['certificate'])"
|
|
v-model="popovervisible"
|
|
>
|
|
<p>导入证书(202312版)</p>
|
|
<div style="text-align: left; margin: 0">
|
|
<el-upload
|
|
:action="upUrl"
|
|
:on-success="handleUploadSuccess"
|
|
accept=".xlsx"
|
|
:headers="upHeaders"
|
|
:show-file-list="false"
|
|
>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
@click="popovervisible = false"
|
|
>上传导入</el-button
|
|
>
|
|
</el-upload>
|
|
</div>
|
|
<el-button slot="reference">导入证书</el-button>
|
|
</el-popover>
|
|
<!-- <el-link href="/media/cert/template/cert-202312.xlsx" target="_blank" type="primary">202312模板</el-link> -->
|
|
<el-link :href="fileUrl" target="downloadFile" type="primary">202312模板</el-link>
|
|
</div>
|
|
</el-card>
|
|
<el-card style="margin-top: 10px">
|
|
<el-table
|
|
v-loading="listLoading"
|
|
:data="tableList.results"
|
|
@selection-change="handleSelectionChange"
|
|
ref="multipleTable"
|
|
style="width: 100%;"
|
|
border
|
|
fit
|
|
stripe
|
|
:default-sort = "{prop: '证书编号', order: 'descending'}"
|
|
highlight-current-row
|
|
max-height="700"
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
width="55">
|
|
</el-table-column>
|
|
<el-table-column label="证书方案" prop="证书方案">
|
|
</el-table-column>
|
|
<el-table-column label="单位名称" prop="单位名称">
|
|
</el-table-column>
|
|
<el-table-column label="所属单位" prop="所属单位">
|
|
</el-table-column>
|
|
<el-table-column label="姓名" prop="姓名">
|
|
</el-table-column>
|
|
<el-table-column label="证书编号" prop="证书编号" sortable>
|
|
</el-table-column>
|
|
<template v-if="listQuery.证书方案=='202309'">
|
|
|
|
<el-table-column label="职务" prop="职务">
|
|
</el-table-column>
|
|
<el-table-column label="资格">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.是否内审员">内审员 </span>
|
|
<span v-if="scope.row.是否授权签字人">授权签字人 </span>
|
|
<span v-if="scope.row.是否最高管理者">最高管理者 </span>
|
|
<span v-if="scope.row.是否质量负责人">质量负责人</span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
<template v-if="listQuery.证书方案=='202312'">
|
|
<el-table-column label="培训日期" prop="培训日期">
|
|
</el-table-column>
|
|
<el-table-column label="培训结束日期" prop="培训结束日期">
|
|
</el-table-column>
|
|
<el-table-column label="发证日期" prop="发证日期">
|
|
</el-table-column>
|
|
</template>
|
|
<el-table-column label="创建日期">
|
|
<template slot-scope="scope">{{scope.row.create_time.substring(0, 10)}}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="success" size="small" @click="handleShow(scope.row)" icon="el-icon-picture"></el-button>
|
|
<el-button type="primary" size="small" @click="handleEdit(scope.row)" icon="el-icon-edit"
|
|
:disabled="!checkPermission(['certificate'])"></el-button>
|
|
<el-button type="danger" size="small" @click="handleDelete(scope)" icon="el-icon-delete"
|
|
:disabled="!checkPermission(['certificate'])"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-show="tableList.count > 0"
|
|
:total="tableList.count"
|
|
:page.sync="listQuery.page"
|
|
:limit.sync="listQuery.page_size"
|
|
@pagination="getList"
|
|
/>
|
|
</el-card>
|
|
<el-dialog
|
|
:visible.sync="dialogVisible"
|
|
:title="dialogType === 'edit' ? '编辑证书' : '新增证书'"
|
|
>
|
|
<el-form
|
|
ref="Form"
|
|
:model="form"
|
|
label-width="160px"
|
|
label-position="right"
|
|
:rules="rule"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="证书方案" prop="证书方案">
|
|
<el-select style="width: 100%" v-model="form.证书方案" placeholder="证书方案" :disabled="dialogType=='edit'">
|
|
<el-option v-for="item in planOption" :key="item" :label="item" :value="item"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="证书编号" prop="证书编号">
|
|
<el-input v-model="form.证书编号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名" prop="姓名">
|
|
<el-input v-model="form.姓名" />
|
|
</el-form-item>
|
|
<el-form-item label="单位名称" prop="单位名称">
|
|
<el-input v-model="form.单位名称"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="form.证书方案=='202312'">
|
|
<el-col :span="12">
|
|
<el-form-item label="培训开始日期" prop="培训日期">
|
|
<el-date-picker
|
|
v-model="form.培训日期"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="培训日期"
|
|
style="width:100%">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="培训结束日期" prop="培训结束日期">
|
|
<el-date-picker
|
|
v-model="form.培训结束日期"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="培训结束日期"
|
|
style="width:100%">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="所属单位" prop="所属单位">
|
|
<el-input v-model="form.所属单位"/>
|
|
</el-form-item>
|
|
<el-form-item label="发证日期" prop="发证日期">
|
|
<el-date-picker
|
|
v-model="form.发证日期"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="发证日期"
|
|
style="width:100%">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col>
|
|
<el-form-item label="课程列表">
|
|
<el-select style="width: 100%" v-model="form.课程列表" clearable multiple placeholder="课程列表">
|
|
<el-option v-for="item in courseOption"
|
|
:key="item.id" :label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="字体方案">
|
|
<el-select style="width: 100%" v-model="form.字体方案" placeholder="字体方案">
|
|
<el-option label="方案1" value="1"></el-option>
|
|
<el-option label="方案2" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="form.证书方案=='202309'">
|
|
<el-col :span="12">
|
|
<el-form-item label="性别">
|
|
<el-input v-model="form.性别" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号">
|
|
<el-input v-model="form.手机号"/>
|
|
</el-form-item>
|
|
<el-form-item label="内审员">
|
|
<el-switch v-model="form.是否内审员" />
|
|
</el-form-item>
|
|
<el-form-item label="授权签字人">
|
|
<el-switch v-model="form.是否授权签字人" />
|
|
</el-form-item>
|
|
<el-form-item label="质量负责人">
|
|
<el-switch v-model="form.是否质量负责人" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="所属单位" prop="所属单位">
|
|
<el-input v-model="form.所属单位"/>
|
|
</el-form-item>
|
|
<el-form-item label="职务" prop="name">
|
|
<el-input v-model="form.职务"/>
|
|
</el-form-item>
|
|
<el-form-item label="字体方案">
|
|
<el-select style="width: 100%" v-model="form.字体方案" placeholder="字体方案">
|
|
<el-option label="方案1" value="1"></el-option>
|
|
<el-option label="方案2" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="最高管理者">
|
|
<el-switch v-model="form.是否最高管理者" />
|
|
</el-form-item>
|
|
<el-form-item label="需要集团证书">
|
|
<el-switch v-model="form.是否需要集团证书" />
|
|
</el-form-item>
|
|
<el-form-item label="需要北京标研培训合格">
|
|
<el-switch v-model="form.是否需要北京标研培训合格" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div style="text-align: right">
|
|
<el-button type="danger" @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="confirm('Form')">确认</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog
|
|
:visible.sync="dialogShow"
|
|
title="证书图片"
|
|
>
|
|
<div class="demo-image__preview">
|
|
<!-- <img :src="imgurl" style="max-width:100%;width: 780px; height: 500px;margin: 20px auto;display: block;"> -->
|
|
<el-image
|
|
style="max-width:100%;width: 780px; height: 500px;margin: 20px auto;display: block;"
|
|
:src="imgurl"
|
|
:zoom-rate="1.2"
|
|
:preview-src-list="srcList"
|
|
fit="cover"
|
|
/>
|
|
</div>
|
|
<!-- <div style="text-align: right">
|
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
|
</div> -->
|
|
</el-dialog>
|
|
<el-dialog title="批量修改" :visible.sync="dialogVisible2" width="30%">
|
|
<el-form
|
|
:model="batchForm"
|
|
label-width="160px"
|
|
label-position="right"
|
|
:rules="rule"
|
|
>
|
|
<el-form-item label="培训开始日期" prop="培训日期">
|
|
<el-date-picker
|
|
v-model="batchForm.培训日期"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="培训日期"
|
|
style="width:100%">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="培训结束日期" prop="培训结束日期">
|
|
<el-date-picker
|
|
v-model="batchForm.培训结束日期"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="培训结束日期"
|
|
style="width:100%">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible2 = false">取 消</el-button>
|
|
<el-button type="primary" @click="handleBatchEdit">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<style >
|
|
.el-table-filter {
|
|
width: 400px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
<script>
|
|
import {getCertificateList,createCertificate,updateCertificate,impCertificate12,deleteCertificate,getCertificate,getCourseList, batchUpdate} from "@/api/edu";
|
|
import checkPermission from "@/utils/permission";
|
|
import { upUrl, upHeaders } from "@/api/file";
|
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
|
const dflistForm = {
|
|
"姓名": "",
|
|
"性别": "",
|
|
"证书编号": "",
|
|
"所属单位": "",
|
|
"单位名称": "",
|
|
"职务": "",
|
|
"手机号": "",
|
|
"发证日期":"",
|
|
"培训日期":"",
|
|
"课程列表":[],
|
|
"培训结束日期":"",
|
|
"字体方案":'1',
|
|
"证书方案":"202312",
|
|
"是否内审员": false,
|
|
"是否授权签字人": false,
|
|
"是否质量负责人": false,
|
|
"是否最高管理者": false,
|
|
"是否需要集团证书": false,
|
|
"是否需要北京标研培训合格": false,
|
|
};
|
|
const dflistQuery = {
|
|
page: 1,
|
|
search:'',
|
|
证书方案:'202312',
|
|
page_size: 20,
|
|
|
|
};
|
|
export default {
|
|
components: { Pagination },
|
|
data() {
|
|
return {
|
|
form:{},
|
|
upHeaders: upHeaders(),
|
|
upUrl: upUrl(),
|
|
delarr: [],
|
|
srcList:[],
|
|
selectedItems:[],
|
|
imgurl:'',
|
|
groupBy: { sszx: [], glzz: [] },
|
|
tableList: { count: 0 ,list:[] },
|
|
listLoading: true,
|
|
listQuery: Object.assign({}, dflistQuery),
|
|
form: Object.assign({}, dflistForm),
|
|
enabledOptions: [
|
|
{ key: "true", display_name: "激活" },
|
|
{ key: "false", display_name: "禁用" },
|
|
],
|
|
batchForm:{
|
|
培训日期:"",
|
|
培训结束日期:""
|
|
},
|
|
dialogShow:false,
|
|
dialogVisible: false,
|
|
dialogVisible2:false,
|
|
dialogType: "new",
|
|
popovervisible: false,
|
|
rule: {
|
|
证书编号: [{ required: true, message: "请填写", trigger: "blur" }],
|
|
所属单位: [{ required: true, message: "请填写", trigger: "blur" }],
|
|
单位名称: [{ required: true, message: "请填写", trigger: "blur" }],
|
|
证书方案: [{ required: true, message: "请选择", trigger: "blur" }],
|
|
姓名: [{ required: true, message: "请填写", trigger: "blur" }],
|
|
},
|
|
courseOption:[],
|
|
planOption:["202309","202312"],
|
|
fileUrl:''
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getList();
|
|
this.getCourseList();
|
|
let timers = new Date().getTime();
|
|
this.fileUrl ='/media/cert/template/cert-202312.xlsx?time='+timers;
|
|
},
|
|
methods: {
|
|
checkPermission,
|
|
handleUploadSuccess(res, file) {
|
|
const loading = this.openLoading();
|
|
let data = { path: res.data.path };
|
|
impCertificate12(data)
|
|
.then((res) => {
|
|
this.$message({
|
|
message: "导入成功",
|
|
type: "success",
|
|
});
|
|
loading.close();
|
|
this.getList();
|
|
})
|
|
.catch((error) => {
|
|
loading.close();
|
|
});
|
|
},
|
|
getList() {
|
|
this.listLoading = true;
|
|
getCertificateList(this.listQuery).then((response) => {
|
|
if (response.data) {
|
|
this.tableList = response.data;
|
|
}
|
|
this.listLoading = false;
|
|
});
|
|
},
|
|
planChange(){
|
|
this.getList();
|
|
},
|
|
//获取课程列表
|
|
getCourseList() {
|
|
getCourseList({page:0}).then((res) => {
|
|
if (res) {
|
|
this.courseOption = res.data;
|
|
}
|
|
});
|
|
},
|
|
handleFilter() {
|
|
this.listQuery.page = 1;
|
|
this.getList();
|
|
},
|
|
handleAdd() {
|
|
this.form = Object.assign({}, dflistForm);
|
|
if(this.listQuery.证书方案!==''){
|
|
this.form.证书方案 = this.listQuery.证书方案;
|
|
}else{this.form.证书方案 = '202312'}
|
|
this.dialogType = "new";
|
|
this.dialogVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs["Form"].clearValidate();
|
|
});
|
|
},
|
|
handleBatchEdit(){
|
|
const ids = this.selectedItems.map(item => item.id);
|
|
const payload = {
|
|
ids: ids,
|
|
updates:{
|
|
培训日期:this.batchForm.培训日期,
|
|
培训结束日期:this.batchForm.培训结束日期,
|
|
}
|
|
};
|
|
// 发送请求
|
|
console.log(payload, "payload");
|
|
batchUpdate(payload).then(response => {
|
|
if (response.code >= 200){
|
|
this.$message.success('批量修改成功');
|
|
this.dialogVisible2 = false;
|
|
this.getList();
|
|
}else{
|
|
this.$message.error('批量修改失败');
|
|
}
|
|
});
|
|
},
|
|
openBatchEditDialog(){
|
|
if (this.selectedItems.length === 0){
|
|
this.$message.warning('请先选择至少一项记录');
|
|
return;
|
|
}
|
|
this.dialogVisible2 = true;
|
|
},
|
|
handleEdit(row) {
|
|
this.form = Object.assign({}, row); // copy obj
|
|
this.form.字体方案 = this.form.字体方案.toString();
|
|
this.dialogType = "edit";
|
|
this.dialogVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs["Form"].clearValidate();
|
|
});
|
|
},
|
|
handleDelete(scope) {
|
|
this.$confirm("确认删除?", "警告", {
|
|
confirmButtonText: "确认",
|
|
cancelButtonText: "取消",
|
|
type: "error",
|
|
})
|
|
.then(async () => {
|
|
await deleteCertificate(scope.row.id);
|
|
this.getList();
|
|
this.$message({
|
|
type: "success",
|
|
message: "成功删除!",
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
});
|
|
},
|
|
async confirm(form) {
|
|
let that = this;
|
|
that.$refs[form].validate((valid) => {
|
|
if (valid) {
|
|
that.form.字体方案 = parseInt(that.form.字体方案);
|
|
const isEdit = that.dialogType === "edit";
|
|
if(that.listQuery.证书方案=='202312'){}else{
|
|
that.form.发证日期=null;
|
|
that.form.培训日期=null;
|
|
that.form.培训结束日期=null;
|
|
}
|
|
if (isEdit) {
|
|
updateCertificate(that.form.id, that.form).then((res) => {
|
|
if (res.code >= 200) {
|
|
that.getList();
|
|
that.dialogVisible = false;
|
|
that.$notify({
|
|
title: "成功",
|
|
message: "编辑成功",
|
|
type: "success",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
createCertificate(that.form).then((res) => {
|
|
if (res.code >= 200) {
|
|
that.getList();
|
|
that.dialogVisible = false;
|
|
that.$notify({
|
|
title: "成功",
|
|
message: "新增成功",
|
|
type: "success",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
handleShow(row){
|
|
let timer = new Date().getTime();
|
|
if(row.证书地址!==null){
|
|
this.imgurl = 'https://testsearch.ctc.ac.cn'+row.证书地址+'?'+timer;
|
|
this.srcList.push(this.imgurl);
|
|
}else{
|
|
getCertificate(row.id).then(res=>{
|
|
this.imgurl='https://testsearch.ctc.ac.cn'+res.data.证书地址+'?'+timer;
|
|
this.srcList.push(this.imgurl);
|
|
})
|
|
}
|
|
this.dialogShow = true;
|
|
},
|
|
handleSelectionChange(val){
|
|
this.selectedItems = val;
|
|
},
|
|
},
|
|
};
|
|
</script>
|