269 lines
6.5 KiB
Vue
269 lines
6.5 KiB
Vue
<template>
|
|
<div class="system-menu-container layout-padding">
|
|
<ProTable ref="tableRef" :request-api="certificatePageGet" :columns="columns" :initParam="initParam"
|
|
:pagination="true" :tool-button="false">
|
|
<template #tools>
|
|
<el-button v-auth="'certificate:add'" type="primary" icon="ele-Plus" @click="onOpenMenu()"> 新增
|
|
</el-button>
|
|
</template>
|
|
<template #index="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
|
|
<template #remark="scope">
|
|
<!-- <img :src="scope.row.remark" style="width: 100px;" /> -->
|
|
<el-button size="small" text type="primary"
|
|
@click="lookBook(scope.row.remark)"> 查看模板 </el-button>
|
|
</template>
|
|
<!-- <template #status="scope">
|
|
<el-tag :type="scope.row.status === 0 ? 'success' : 'danger'"> {{ scope.row.status === 0 ? '启用' : '禁用'
|
|
}}</el-tag>
|
|
</template> -->
|
|
<template #action="scope">
|
|
<el-button v-auth="'certificate:edit'" icon="ele-Edit" size="small" text type="primary"
|
|
@click="onOpenMenu(scope.row)"> 编辑 </el-button>
|
|
<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
|
|
<template #reference>
|
|
<el-button v-auth="'certificate:delete'" icon="ele-Delete" size="small" text type="danger"> 删除
|
|
</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</ProTable>
|
|
|
|
<!-- 弹窗 -->
|
|
<el-dialog :title="dialogTitle" v-model="isShowDialog" width="60%">
|
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="180px"
|
|
style="width: 80%;margin-bottom: 30px;max-width: 600px" v-if="isShowDialog">
|
|
|
|
<!-- 证书名称 -->
|
|
<el-form-item label="证书名称" prop="name">
|
|
<el-input v-model="formData.name" placeholder="请输入证书名称"></el-input>
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 证书模板 -->
|
|
<el-form-item label="证书模板" prop="templateId">
|
|
<el-upload class="avatar-uploader" :name="'templateFile'" :headers="headers" accept=".doc,.docx"
|
|
action="/api/certificatetemplate/uploaddoctemplate" :show-file-list="true" drag
|
|
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
|
|
<template #default>
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
|
<div class="el-upload__text">仅支持上传.doc和.docx文件</div>
|
|
</template>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="onCancel">取消</el-button>
|
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="sysMenu">
|
|
import { defineAsyncComponent, ref, reactive } from 'vue';
|
|
import { ElMessage, ElForm } from 'element-plus';
|
|
import SysMenuApi from '/@/api/SysMenuApi';
|
|
import { auths } from '/@/utils/authFunction';
|
|
import ProTable from '/@/components/ProTable/index.vue';
|
|
import { certificatePageGet, certificateAddPost, certificateEditPut, certificateDeleteDelete } from '/@/api/match/certificate';
|
|
import { Session } from '/@/utils/storage';
|
|
// 定义表单引用类型
|
|
const formRef = ref();
|
|
|
|
const formData = ref({
|
|
name: '',
|
|
templateId: '',
|
|
code: "",
|
|
remark: "",
|
|
status: 0,
|
|
sort: 0
|
|
})
|
|
const initParam = ref({ refresh: true });
|
|
const headers = {
|
|
Authorization: 'Bearer ' + Session.get('access-token'),
|
|
};
|
|
|
|
const lookBook = (url) => {
|
|
window.open(url);
|
|
}
|
|
const formRules = ref({
|
|
name: [
|
|
{ required: true, message: '请输入证书名称', trigger: 'blur' }
|
|
],
|
|
templateId: [
|
|
{ required: true, message: '请上传证书模版', trigger: 'blur' }
|
|
],
|
|
|
|
});
|
|
|
|
const columns = ref([
|
|
{
|
|
prop: 'index',
|
|
label: '序号',
|
|
align: 'center',
|
|
},
|
|
{
|
|
prop: 'name',
|
|
label: '证书名称',
|
|
align: 'center',
|
|
search: {
|
|
el: 'input',
|
|
},
|
|
},
|
|
{ prop: 'remark', label: '证书' },
|
|
{ prop: 'action', label: '操作', align: 'center', fixed: 'right', isShow: auths(['certificate:delete', 'certificate:edit']) },
|
|
]);
|
|
|
|
const isShowDialog = ref(false);
|
|
const dialogTitle = ref('新增');
|
|
|
|
const onOpenMenu = (row) => {
|
|
dialogTitle.value = row.id ? '编辑' : '新增';
|
|
if (row) {
|
|
formData.value = row;
|
|
} else {
|
|
formData.value = {
|
|
name: '',
|
|
templateId: '',
|
|
code: "",
|
|
remark: "",
|
|
status: 0,
|
|
sort: 0
|
|
};
|
|
}
|
|
isShowDialog.value = true;
|
|
};
|
|
|
|
//删除菜单
|
|
const onDeleteMenu = async (id) => {
|
|
const { succeeded, errors } = await certificateDeleteDelete({ id });
|
|
if (succeeded) {
|
|
initParam.value.refresh = !initParam.value.refresh;
|
|
ElMessage.success('删除成功');
|
|
} else {
|
|
ElMessage.error(errors);
|
|
}
|
|
};
|
|
|
|
const handleAvatarSuccess = (response, uploadFile) => {
|
|
console.log(response);
|
|
formData.value.templateId = response.data.templateId;
|
|
formData.value.code = response.data.templateId;
|
|
formData.value.remark = response.data.templateUrl;
|
|
}
|
|
|
|
const beforeAvatarUpload = (file) => {
|
|
console.log(file);
|
|
const isDoc = file.type === 'application/msword' ||
|
|
file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
|
|
|
if (!isDoc) {
|
|
ElMessage.error('只能上传DOC/DOCX格式文件!')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
|
|
// 表单提交
|
|
const onSubmit = () => {
|
|
if (!formRef.value) return;
|
|
|
|
formRef.value.validate(async (valid) => {
|
|
if (!valid) return;
|
|
|
|
try {
|
|
let res;
|
|
if (formData.value.id) {
|
|
res = await certificateEditPut(formData.value);
|
|
} else {
|
|
res = await certificateAddPost(formData.value);
|
|
}
|
|
|
|
if (res.succeeded) {
|
|
initParam.value.refresh = !initParam.value.refresh;
|
|
ElMessage.success(dialogTitle.value + '成功');
|
|
isShowDialog.value = false;
|
|
} else {
|
|
ElMessage.error(res.errors);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 取消
|
|
const onCancel = () => {
|
|
isShowDialog.value = false;
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.avatar-uploader {
|
|
width: 100%;
|
|
height: 210px;
|
|
}
|
|
|
|
.el-upload__text {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dialog-footer {
|
|
margin-top: 80px;
|
|
}
|
|
|
|
/* 时长组合框样式 */
|
|
.duration-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.duration-row .el-input {
|
|
width: 120px;
|
|
}
|
|
|
|
.duration-separator {
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.duration-label {
|
|
color: #909399;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/* .avatar-uploader .el-upload {
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
text-align: center;
|
|
} */
|
|
</style> |