|
@@ -1,188 +1,222 @@
|
|
<template>
|
|
<template>
|
|
- <div class="data-list">
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <el-table :data="dataList" style="width: 100%" header-row-class-name="headerBg" empty-text="没有模板信息">
|
|
|
|
- <el-table-column prop="id" label="ID" align="center" width="80"/>
|
|
|
|
- <el-table-column prop="title" label="模板名称" align="left" min-width="180"/>
|
|
|
|
- <el-table-column prop="category.name" label="所属分类" align="center" width="150"/>
|
|
|
|
- <el-table-column prop="createTime" label="创建时间" align="center" width="150"/>
|
|
|
|
- <el-table-column prop="status" label="模板状态" align="center" width="150">
|
|
|
|
- <template #default="scope">
|
|
|
|
- <div v-if="scope.row.status==5">启用</div>
|
|
|
|
- <div v-if="scope.row.status==6">停用</div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="操作" align="center" :width="editWidth()">
|
|
|
|
- <template #default="scope">
|
|
|
|
- <div class="btns">
|
|
|
|
- <el-button type="primary" size="small" v-if="allowEdit" @click="btnEdit(scope.row.id)"><svg-icon icon-class="edit"/>编辑</el-button>
|
|
|
|
-
|
|
|
|
- <el-button type="danger" size="small" v-if="allowDelete" @click="btnDelete(scope.row.id)"><svg-icon icon-class="delete"/>删除</el-button>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- </el-table>
|
|
|
|
-
|
|
|
|
- <div class="page-info">
|
|
|
|
- <el-pagination
|
|
|
|
- v-model:currentPage="queryForm.page"
|
|
|
|
- :page-size="queryForm.pageSize"
|
|
|
|
- :total="recordCount"
|
|
|
|
- :page-count="pageTotal"
|
|
|
|
- background
|
|
|
|
- layout="prev, pager, next"
|
|
|
|
- @current-change="ChangePage"
|
|
|
|
- >
|
|
|
|
- </el-pagination>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <div class="data-list" v-loading="loading" element-loading-text="加载中...">
|
|
|
|
+ <el-table
|
|
|
|
+ :data="dataList"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ header-row-class-name="headerBg"
|
|
|
|
+ empty-text="没有模板信息"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column prop="id" label="ID" align="center" width="80" />
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="title"
|
|
|
|
+ label="模板名称"
|
|
|
|
+ align="left"
|
|
|
|
+ min-width="180"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="category.name"
|
|
|
|
+ label="所属分类"
|
|
|
|
+ align="center"
|
|
|
|
+ width="150"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="createTime"
|
|
|
|
+ label="创建时间"
|
|
|
|
+ align="center"
|
|
|
|
+ width="150"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="status"
|
|
|
|
+ label="模板状态"
|
|
|
|
+ align="center"
|
|
|
|
+ width="150"
|
|
|
|
+ >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <div v-if="scope.row.status == 5">启用</div>
|
|
|
|
+ <div v-if="scope.row.status == 6">停用</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="操作" align="center" :width="editWidth()">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <div class="btns">
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ size="small"
|
|
|
|
+ v-if="allowEdit"
|
|
|
|
+ @click="btnEdit(scope.row.id)"
|
|
|
|
+ ><svg-icon icon-class="edit" />编辑</el-button
|
|
|
|
+ >
|
|
|
|
+
|
|
|
|
+ <el-button
|
|
|
|
+ type="danger"
|
|
|
|
+ size="small"
|
|
|
|
+ v-if="allowDelete"
|
|
|
|
+ @click="btnDelete(scope.row.id)"
|
|
|
|
+ ><svg-icon icon-class="delete" />删除</el-button
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+
|
|
|
|
+ <div class="page-info">
|
|
|
|
+ <el-pagination
|
|
|
|
+ v-model:currentPage="queryForm.page"
|
|
|
|
+ :page-size="queryForm.pageSize"
|
|
|
|
+ :total="recordCount"
|
|
|
|
+ :page-count="pageTotal"
|
|
|
|
+ background
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
+ @current-change="ChangePage"
|
|
|
|
+ >
|
|
|
|
+ </el-pagination>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
-
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import{searchDocument,deleteDocument} from'@/api/document';
|
|
|
|
- export default{
|
|
|
|
-
|
|
|
|
- props:{
|
|
|
|
- queryForm:{
|
|
|
|
- type:Object,
|
|
|
|
- default:()=>{
|
|
|
|
- return {
|
|
|
|
- page:1,
|
|
|
|
- pageSize:10,
|
|
|
|
- title:'',
|
|
|
|
- category_id:'',
|
|
|
|
- status:'',
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- allowEdit:{
|
|
|
|
- type:Boolean,
|
|
|
|
- default:false,
|
|
|
|
|
|
+import { searchDocument, deleteDocument } from "@/api/document";
|
|
|
|
+export default {
|
|
|
|
+ props: {
|
|
|
|
+ queryForm: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => {
|
|
|
|
+ return {
|
|
|
|
+ page: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ title: "",
|
|
|
|
+ category_id: "",
|
|
|
|
+ status: "",
|
|
|
|
+ };
|
|
},
|
|
},
|
|
- allowDelete:{
|
|
|
|
- type:Boolean,
|
|
|
|
- default:false,
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch:{
|
|
|
|
-
|
|
|
|
- 'queryForm': {
|
|
|
|
- handler: function(val) {
|
|
|
|
-
|
|
|
|
- this.search();
|
|
|
|
- },
|
|
|
|
- // immediate: true,//立即执行
|
|
|
|
- deep: true
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
},
|
|
},
|
|
- data(){
|
|
|
|
- return{
|
|
|
|
- dialogVisible:false,//控制产品审核
|
|
|
|
- currentDataId:0,
|
|
|
|
- recordCount:0,
|
|
|
|
- pageTotal:1,
|
|
|
|
- dataList:[],
|
|
|
|
- currentData:{},
|
|
|
|
- }
|
|
|
|
|
|
+ allowEdit: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false,
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
- this.search();
|
|
|
|
|
|
+ allowDelete: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false,
|
|
},
|
|
},
|
|
- methods:{
|
|
|
|
-
|
|
|
|
- editWidth(){
|
|
|
|
- if(this.allowDelete && this.allowEdit){
|
|
|
|
- return 200;
|
|
|
|
- }
|
|
|
|
- if(this.allowDelete||this.allowEdit){
|
|
|
|
- return 120;
|
|
|
|
- }
|
|
|
|
- return 100;
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- onFocusVal(e){
|
|
|
|
- let _this=this;
|
|
|
|
- _this.currentDataId=e.target.dataset.id;
|
|
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ queryForm: {
|
|
|
|
+ handler: function (val) {
|
|
|
|
+ this.search();
|
|
},
|
|
},
|
|
|
|
+ // immediate: true,//立即执行
|
|
|
|
+ deep: true,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ loading: false,
|
|
|
|
+ dialogVisible: false, //控制产品审核
|
|
|
|
+ currentDataId: 0,
|
|
|
|
+ recordCount: 0,
|
|
|
|
+ pageTotal: 1,
|
|
|
|
+ dataList: [],
|
|
|
|
+ currentData: {},
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.search();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ editWidth() {
|
|
|
|
+ if (this.allowDelete && this.allowEdit) {
|
|
|
|
+ return 200;
|
|
|
|
+ }
|
|
|
|
+ if (this.allowDelete || this.allowEdit) {
|
|
|
|
+ return 120;
|
|
|
|
+ }
|
|
|
|
+ return 100;
|
|
|
|
+ },
|
|
|
|
|
|
- onChangeVal(e){
|
|
|
|
- let _this=this;
|
|
|
|
- let par={
|
|
|
|
- id:_this.currentDataId,
|
|
|
|
- val:e,
|
|
|
|
- };
|
|
|
|
|
|
+ onFocusVal(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ _this.currentDataId = e.target.dataset.id;
|
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
|
|
|
+ onChangeVal(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ let par = {
|
|
|
|
+ id: _this.currentDataId,
|
|
|
|
+ val: e,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
|
|
- btnDelete(e){
|
|
|
|
- let _this=this;
|
|
|
|
- let par={
|
|
|
|
- id:e,
|
|
|
|
- }
|
|
|
|
- _this.$confirm("您是否确认删除该记录?","提示",{
|
|
|
|
- confirmButtonText: '确认',
|
|
|
|
- cancelButtonText: '取消',
|
|
|
|
- type: 'warning',
|
|
|
|
- }).then((res)=>{
|
|
|
|
|
|
+ btnDelete(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ let par = {
|
|
|
|
+ id: e,
|
|
|
|
+ };
|
|
|
|
+ _this
|
|
|
|
+ .$confirm("您是否确认删除该记录?", "提示", {
|
|
|
|
+ confirmButtonText: "确认",
|
|
|
|
+ cancelButtonText: "取消",
|
|
|
|
+ type: "warning",
|
|
|
|
+ })
|
|
|
|
+ .then((res) => {
|
|
// console.log("AAA")
|
|
// console.log("AAA")
|
|
- deleteDocument(par).then(res=>{
|
|
|
|
- _this.search();
|
|
|
|
- })
|
|
|
|
- }).catch(()=>{
|
|
|
|
|
|
+ deleteDocument(par).then((res) => {
|
|
|
|
+ _this.search();
|
|
|
|
+ });
|
|
})
|
|
})
|
|
- },
|
|
|
|
-
|
|
|
|
- searchData(){
|
|
|
|
- let _this=this;
|
|
|
|
- _this.dialogVisible=false;
|
|
|
|
- _this.search();
|
|
|
|
- },
|
|
|
|
|
|
+ .catch(() => {});
|
|
|
|
+ },
|
|
|
|
|
|
|
|
+ searchData() {
|
|
|
|
+ let _this = this;
|
|
|
|
+ _this.dialogVisible = false;
|
|
|
|
+ _this.search();
|
|
|
|
+ },
|
|
|
|
|
|
- //编辑
|
|
|
|
- btnEdit(e){
|
|
|
|
- let _this=this;
|
|
|
|
- let a=document.createElement("a");
|
|
|
|
- a.href="#/document/create?articleId="+e;
|
|
|
|
- a.target="_blank";
|
|
|
|
- a.click();
|
|
|
|
|
|
+ //编辑
|
|
|
|
+ btnEdit(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ let a = document.createElement("a");
|
|
|
|
+ a.href = "#/document/create?articleId=" + e;
|
|
|
|
+ a.target = "_blank";
|
|
|
|
+ a.click();
|
|
|
|
|
|
- // _this.$router.push({path:"/document/create",query:{articleId:e}})
|
|
|
|
- },
|
|
|
|
|
|
+ // _this.$router.push({path:"/document/create",query:{articleId:e}})
|
|
|
|
+ },
|
|
|
|
|
|
- handleClose(){
|
|
|
|
- let _this=this;
|
|
|
|
- _this.currentData={};
|
|
|
|
- _this.dialogVisible=false;
|
|
|
|
- },
|
|
|
|
|
|
+ handleClose() {
|
|
|
|
+ let _this = this;
|
|
|
|
+ _this.currentData = {};
|
|
|
|
+ _this.dialogVisible = false;
|
|
|
|
+ },
|
|
|
|
|
|
- //搜索
|
|
|
|
- search(){
|
|
|
|
- let _this=this;
|
|
|
|
- searchDocument(_this.queryForm).then(res=>{
|
|
|
|
- if(!res)return;
|
|
|
|
- _this.dataList=res.data.dataList.filter(el => el.is_template == 1);
|
|
|
|
- _this.recordCount=res.data.totalRecord;
|
|
|
|
- _this.pageTotal=res.data.pageTotal;
|
|
|
|
|
|
+ //搜索
|
|
|
|
+ search() {
|
|
|
|
+ let _this = this;
|
|
|
|
+ _this.loading = true; // Set loading to true before API call
|
|
|
|
+ searchDocument(_this.queryForm)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ if (!res) return;
|
|
|
|
+ _this.dataList = res.data.dataList.filter(
|
|
|
|
+ (el) => el.is_template == 1
|
|
|
|
+ );
|
|
|
|
+ _this.recordCount = res.data.totalRecord;
|
|
|
|
+ _this.pageTotal = res.data.pageTotal;
|
|
|
|
+ _this.loading = false; // Set loading to false after data is processed
|
|
})
|
|
})
|
|
- },
|
|
|
|
- //修改分页
|
|
|
|
- ChangePage(e){
|
|
|
|
- let _this=this;
|
|
|
|
- _this.queryForm.page=e;
|
|
|
|
- _this.search();
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ .catch(() => {
|
|
|
|
+ _this.loading = false; // Set loading to false if there's an error
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //修改分页
|
|
|
|
+ ChangePage(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ _this.queryForm.page = e;
|
|
|
|
+ _this.search();
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
-@import './dataList.scss';
|
|
|
|
|
|
+@import "./dataList.scss";
|
|
</style>
|
|
</style>
|