|
|
@@ -0,0 +1,243 @@
|
|
|
+<template>
|
|
|
+ <div class="template">
|
|
|
+ <div class="template-list">
|
|
|
+ <div id="query-form">
|
|
|
+ <el-form inline>
|
|
|
+ <el-form-item prop="name" label="名称">
|
|
|
+ <el-input v-model="form.name" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="status" label="状态">
|
|
|
+ <el-select v-model="form.status">
|
|
|
+ <el-option v-for="item in status_list" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="search-box">
|
|
|
+ <el-button class="search-btn" type="primary" @click="queryList">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-button type="primary" size="small" @click="visible = true"> 创建模板 </el-button>
|
|
|
+ </div>
|
|
|
+ <el-table v-if="tableHeight" :data="list" :max-height="tableHeight + 'px'">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="60"
|
|
|
+ align="center"
|
|
|
+ :index="(form.cur_page - 1) * form.page_capacity + 1"
|
|
|
+ header-align="center"
|
|
|
+ class-name="index-column"
|
|
|
+ />
|
|
|
+ <el-table-column min-width="250" prop="id" label="编号" align="center" header-align="center" />
|
|
|
+ <el-table-column prop="name" label="名称" align="center" header-align="center" />
|
|
|
+
|
|
|
+ <el-table-column min-width="150" prop="status" label="状态" align="center" header-align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ {{ status_list.find((item) => item.value === row.status).label }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="create_time" label="创建时间" align="center" width="180" header-align="center" />
|
|
|
+
|
|
|
+ <el-table-column prop="operation" label="操作" fixed="right" width="200" align="center" header-align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="link" @click="previewTemplate(row)">预览</span>
|
|
|
+ <span class="link" @click="changeStatusTemplate(row)">{{
|
|
|
+ row.status === 0 || row.status === 3 || row.status === 4 ? '申请发布' : row.status === 1 ? '撤销申请' : ''
|
|
|
+ }}</span>
|
|
|
+ <span class="link danger" @click="deleteTemplate(row)">删除</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <PaginationPage ref="pagination" :total="total" @getList="queryTemplateList" />
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="创建模板"
|
|
|
+ :visible="visible"
|
|
|
+ width="460px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ class="add-chapter"
|
|
|
+ @close="dialogClose"
|
|
|
+ >
|
|
|
+ <el-form ref="form" :model="data" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="模板名称" prop="name">
|
|
|
+ <el-input ref="name" v-model="data.name" placeholder="请输入模板名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="dialogClose">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addTemplate" :loading="loading">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import PaginationPage from '@/components/PaginationPage.vue';
|
|
|
+
|
|
|
+import { PageQueryTemplateListOrg } from '@/api/list.js';
|
|
|
+import { CreateTemplateOrg, UpdateTemplateStatus, DeleteTemplate } from '@/api/template';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'PersonalWorkbenchTemplateOrg',
|
|
|
+ components: {
|
|
|
+ PaginationPage,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ cur_page_begin_index: 0,
|
|
|
+ status_list: [
|
|
|
+ {
|
|
|
+ value: -1,
|
|
|
+ label: '全部',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ label: '草稿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '申请发布',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '已发布',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: '未发布',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ label: '驳回发布申请',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ status: -1,
|
|
|
+ page_capacity: 10,
|
|
|
+ cur_page: 1,
|
|
|
+ },
|
|
|
+ tableHeight: 0,
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ name: '',
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.tableHeight =
|
|
|
+ document.getElementsByClassName('app-container')[0].clientHeight -
|
|
|
+ document.getElementById('query-form').clientHeight -
|
|
|
+ document.getElementsByClassName('el-pagination')[0].clientHeight -
|
|
|
+ 10;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ queryTemplateList(data) {
|
|
|
+ this.form.page_capacity = data.page_capacity;
|
|
|
+ this.form.cur_page = data.cur_page;
|
|
|
+ PageQueryTemplateListOrg(this.form).then(({ total_count, template_list }) => {
|
|
|
+ this.total = total_count;
|
|
|
+ this.list = template_list;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ queryList() {
|
|
|
+ this.queryTemplateList({ cur_page: 1, page_capacity: this.form.page_capacity });
|
|
|
+ },
|
|
|
+ // 关闭弹窗
|
|
|
+ dialogClose() {
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ // 确定创建模板
|
|
|
+ addTemplate() {
|
|
|
+ this.loading = true;
|
|
|
+ CreateTemplateOrg(this.data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.visible = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '创建成功!',
|
|
|
+ });
|
|
|
+ this.data = {
|
|
|
+ name: '',
|
|
|
+ };
|
|
|
+
|
|
|
+ this.queryList();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 预览模板
|
|
|
+ previewTemplate(row) {},
|
|
|
+ //更改模板状态
|
|
|
+ changeStatusTemplate(row) {
|
|
|
+ let status = null;
|
|
|
+ if (row.status === 0 || row.status === 3 || row.status === 4) {
|
|
|
+ status = 1;
|
|
|
+ } else if (row.status === 1) {
|
|
|
+ status = 0;
|
|
|
+ }
|
|
|
+ UpdateTemplateStatus({ status: status, id: row.id }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '设置成功!',
|
|
|
+ });
|
|
|
+ this.queryTemplateList({ cur_page: this.form.cur_page, page_capacity: this.form.page_capacity });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除模板
|
|
|
+ deleteTemplate(row) {
|
|
|
+ this.$confirm('是否删除此模板？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ DeleteTemplate({ id: row.id }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!',
|
|
|
+ });
|
|
|
+ this.queryTemplateList({ cur_page: this.form.cur_page, page_capacity: this.form.page_capacity });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@use '@/styles/mixin.scss' as *;
|
|
|
+
|
|
|
+.template {
|
|
|
+ @include page-base;
|
|
|
+ @include table-list;
|
|
|
+
|
|
|
+ #query-form {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ :deep .el-form-item--small.el-form-item {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha