dataList.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <div class="data-list" v-loading="loading" element-loading-text="加载中...">
  3. <el-table
  4. :data="dataList"
  5. style="width: 100%"
  6. header-row-class-name="headerBg"
  7. empty-text="没有文档信息"
  8. >
  9. <el-table-column prop="dcm_id" label="ID" align="center" width="80" />
  10. <el-table-column prop="dcm_title" label="文档标题" align="left" />
  11. <!-- <el-table-column
  12. prop="user_name"
  13. label="创建人"
  14. align="center"
  15. width="150"
  16. /> -->
  17. <el-table-column prop="dcm_type" label="文档模板类别" align="center">
  18. <template #default="scope">
  19. <div v-if="scope.row.dcm_type == 1">官方模板</div>
  20. <div v-if="scope.row.dcm_type == 2">私有模板</div>
  21. <div v-if="scope.row.dcm_type == 3">共享模板</div>
  22. </template>
  23. </el-table-column>
  24. <!-- <el-table-column
  25. prop="create_time"
  26. label="创建时间"
  27. align="center"
  28. width="150"
  29. /> -->
  30. <el-table-column prop="status" label="文档状态" align="center">
  31. <template #default="scope">
  32. <div v-if="scope.row.dcm_status == 4">已删除</div>
  33. <div v-if="scope.row.dcm_status == 5">启用</div>
  34. <div v-if="scope.row.dcm_status == 6">已停用</div>
  35. </template>
  36. </el-table-column>
  37. <el-table-column label="操作" align="center" :width="editWidth()">
  38. <template #default="scope">
  39. <div class="btns">
  40. <el-button
  41. type="primary"
  42. size="small"
  43. v-if="allowEdit"
  44. @click="btnEdit(scope.row.dcm_id)"
  45. ><svg-icon icon-class="edit" />编辑</el-button
  46. >
  47. <el-button
  48. type="danger"
  49. size="small"
  50. v-if="allowDelete"
  51. @click="btnDelete(scope.row.dcm_id)"
  52. ><svg-icon icon-class="delete" />删除</el-button
  53. >
  54. </div>
  55. </template>
  56. </el-table-column>
  57. </el-table>
  58. <div class="page-info">
  59. <el-pagination
  60. :currentPage="queryForm.page"
  61. :page-size="queryForm.pageSize"
  62. :total="recordCount"
  63. :page-count="pageTotal"
  64. background
  65. layout="prev, pager, next"
  66. @current-change="ChangePage"
  67. >
  68. </el-pagination>
  69. </div>
  70. </div>
  71. </template>
  72. <script>
  73. import { pageDocument, deleteDocument, searchlistDoc } from "@/api/document";
  74. export default {
  75. props: {
  76. queryForm: {
  77. type: Object,
  78. default: () => {
  79. return {
  80. page: 1,
  81. pageSize: 10,
  82. dcm_title: "",
  83. dcm_type: "",
  84. isContentShow: false,
  85. };
  86. },
  87. },
  88. allowEdit: {
  89. type: Boolean,
  90. default: false,
  91. },
  92. allowDelete: {
  93. type: Boolean,
  94. default: false,
  95. },
  96. },
  97. watch: {
  98. queryForm: {
  99. handler: function (val) {
  100. this.search();
  101. },
  102. // immediate: true,//立即执行
  103. deep: true,
  104. },
  105. },
  106. data() {
  107. return {
  108. loading: false,
  109. dialogVisible: false, //控制产品审核
  110. currentDataId: 0,
  111. recordCount: 0,
  112. pageTotal: 1,
  113. dataList: [],
  114. currentData: {},
  115. };
  116. },
  117. mounted() {
  118. this.search();
  119. },
  120. methods: {
  121. editWidth() {
  122. if (this.allowDelete && this.allowEdit) {
  123. return 200;
  124. }
  125. if (this.allowDelete || this.allowEdit) {
  126. return 120;
  127. }
  128. return 100;
  129. },
  130. onFocusVal(e) {
  131. let _this = this;
  132. _this.currentDataId = e.target.dataset.id;
  133. },
  134. onChangeVal(e) {
  135. let _this = this;
  136. let par = {
  137. id: _this.currentDataId,
  138. val: e,
  139. };
  140. },
  141. btnDelete(e) {
  142. let _this = this;
  143. let par = {
  144. id: e,
  145. };
  146. _this
  147. .$confirm("您是否确认删除该记录?", "提示", {
  148. confirmButtonText: "确认",
  149. cancelButtonText: "取消",
  150. type: "warning",
  151. })
  152. .then((res) => {
  153. // console.log("AAA")
  154. deleteDocument(e).then((res) => {
  155. _this.search();
  156. });
  157. })
  158. .catch(() => {});
  159. },
  160. searchData() {
  161. let _this = this;
  162. _this.dialogVisible = false;
  163. _this.search();
  164. },
  165. //编辑
  166. btnEdit(e) {
  167. this.$router.push(
  168. "system/document/create?articleId=" + e + "&type=document"
  169. );
  170. /* let _this = this;
  171. let a = document.createElement("a");
  172. a.href = "#/document/create?articleId=" + e+"&type=document"; // 使用 hash
  173. a.target = "_blank";
  174. a.click(); */
  175. //this.$router.push({path:"/document/create",query:{articleId:e}})
  176. },
  177. handleClose() {
  178. let _this = this;
  179. _this.currentData = {};
  180. _this.dialogVisible = false;
  181. },
  182. //搜索
  183. search() {
  184. let _this = this;
  185. _this.loading = true; // Set loading to true before API call
  186. searchlistDoc(_this.queryForm)
  187. .then((res) => {
  188. if (!res) {
  189. _this.loading = false; // Set loading to false if no response
  190. return;
  191. }
  192. _this.dataList = res.data.dataList; /* .filter(
  193. (el) => el.is_template == 0
  194. ); */
  195. _this.recordCount = res.data.totalRecord;
  196. _this.pageTotal = res.data.pageTotal;
  197. _this.loading = false; // Set loading to false after data is processed
  198. })
  199. .catch(() => {
  200. _this.loading = false; // Set loading to false if there's an error
  201. });
  202. },
  203. //修改分页
  204. ChangePage(e) {
  205. let _this = this;
  206. _this.queryForm.page = e;
  207. _this.search();
  208. },
  209. },
  210. };
  211. </script>
  212. <style lang="scss">
  213. @import "./dataList.scss";
  214. </style>