dataList.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <div class="data-list">
  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="id" label="ID" align="center" width="80" />
  10. <!-- <el-table-column prop="code" label="引用名" align="center" width="180"/> -->
  11. <el-table-column prop="name" label="模块名称" align="left" />
  12. <el-table-column prop="type_name" label="所属分类" align="left" />
  13. <el-table-column prop="create_time" label="创建时间" align="center" />
  14. <el-table-column prop="status" label="模板状态" align="center">
  15. <template #default="scope">
  16. <div v-if="scope.row.status == 5">启用</div>
  17. <div v-if="scope.row.status == 6">停用</div>
  18. </template>
  19. </el-table-column>
  20. <el-table-column label="操作" fixed="right" align="center">
  21. <template #default="scope">
  22. <div class="btns">
  23. <el-button
  24. type="primary"
  25. size="small"
  26. @click="btnEdit(scope.row.id)"
  27. ><svg-icon icon-class="edit" />编辑模块</el-button
  28. >
  29. <el-button
  30. type="primary"
  31. size="small"
  32. @click="EditorInfo(scope.row)"
  33. ><svg-icon icon-class="edit" />修改信息</el-button
  34. >
  35. <el-button
  36. type="danger"
  37. size="small"
  38. @click="btnDelete(scope.row.id)"
  39. ><svg-icon icon-class="delete" />删除</el-button
  40. ><!-- v-if="scope.row.auth.delete" -->
  41. </div>
  42. </template>
  43. </el-table-column>
  44. </el-table>
  45. <div class="page-info">
  46. <el-pagination
  47. v-model:currentPage="queryForm.page"
  48. :page-size="queryForm.pageSize"
  49. :total="recordCount"
  50. :page-count="pageTotal"
  51. background
  52. layout="prev, pager, next"
  53. @current-change="ChangePage"
  54. >
  55. </el-pagination>
  56. </div>
  57. <el-dialog
  58. :visible.sync="dialogVisible"
  59. append-to-body
  60. v-el-drag-dialog
  61. :close-on-click-modal="false"
  62. width="30%"
  63. custom-class="prod-verify"
  64. title="修改模块信息"
  65. >
  66. <el-form
  67. :model="moduleForm"
  68. :rules="moduleRules"
  69. ref="moduleRef"
  70. label-position="left"
  71. label-width="100px"
  72. >
  73. <el-form-item label="模块名称:" prop="name">
  74. <el-input
  75. style="width: 220px"
  76. v-model="moduleForm.name"
  77. placeholder="请选择模块名称"
  78. ></el-input>
  79. </el-form-item>
  80. <el-form-item label="所属分类:" prop="category_id">
  81. <el-select
  82. v-model="moduleForm.category_id"
  83. clearable
  84. class="m-2"
  85. placeholder="请选择分类"
  86. size="large"
  87. >
  88. <el-option
  89. v-for="item in categoryList"
  90. :key="item.id"
  91. :label="item.name"
  92. :value="item.id"
  93. />
  94. </el-select>
  95. </el-form-item>
  96. <el-form-item label="模块状态:" prop="status">
  97. <el-select
  98. v-model="moduleForm.status"
  99. class="m-2"
  100. placeholder="请选择模板块态"
  101. size="large"
  102. >
  103. <el-option
  104. v-for="item in statusOptions"
  105. :key="item.value"
  106. :label="item.label"
  107. :value="item.value"
  108. />
  109. </el-select>
  110. </el-form-item>
  111. </el-form>
  112. <span slot="footer" class="dialog-footer">
  113. <el-button @click="closeModule">取 消</el-button>
  114. <el-button type="primary" @click="submitModule">确 定</el-button>
  115. </span>
  116. </el-dialog>
  117. </div>
  118. </template>
  119. <script>
  120. import { mapGetters } from "vuex";
  121. import { deleteTemplate, pageTemplate,getAllList,updateTemplate } from "@/api/template";
  122. import dataInfo from "./dataInfo.vue";
  123. import elDragDialog from "@/directive/el-drag-dialog";
  124. import Editor from "@/views/document/com/editor.vue";
  125. export default {
  126. components: {
  127. dataInfo,
  128. },
  129. directives: { elDragDialog },
  130. props: {
  131. queryForm: {
  132. type: Object,
  133. default: () => {
  134. return {
  135. page: 1,
  136. pageSize: 10,
  137. name: "",
  138. sign: "",
  139. };
  140. },
  141. },
  142. },
  143. watch: {
  144. queryForm: {
  145. handler: function (val) {
  146. this.search();
  147. },
  148. // immediate: true,//立即执行
  149. deep: true,
  150. },
  151. },
  152. computed: {
  153. ...mapGetters(["roleInfo", "authList"]),
  154. },
  155. data() {
  156. return {
  157. dialogVisible: false, //控制产品审核
  158. currentDataId: 0,
  159. recordCount: 0,
  160. pageTotal: 1,
  161. dataList: [],
  162. currentData: {},
  163. dialogVisible: false,
  164. moduleForm: {
  165. name: "",
  166. status: 5,
  167. category_id: "",
  168. },
  169. moduleRules: {
  170. name: [{ required: true, message: "请输模块名称", trigger: "blur" }],
  171. status: [{ required: true, message: "请选择状态", trigger: "change" }],
  172. category_id: [
  173. { required: true, message: "请选择分类", trigger: "change" },
  174. ],
  175. },
  176. statusOptions: [
  177. {
  178. value: "",
  179. label: "请选择状态",
  180. },
  181. {
  182. value: 5,
  183. label: "启用",
  184. },
  185. {
  186. value: 6,
  187. label: "停用",
  188. },
  189. ],
  190. };
  191. },
  192. mounted() {
  193. this.search();
  194. this.initCategoryList();
  195. },
  196. methods: {
  197. /* 取消修改 */
  198. closeModule() {
  199. this.dialogVisible = false;
  200. this.moduleForm = {
  201. name: "",
  202. status: 5,
  203. category_id: "",
  204. };
  205. },
  206. /* 确定修改模块*/
  207. submitModule() {
  208. this.$refs.moduleRef.validate((valid) => {
  209. if (valid) {
  210. updateTemplate(this.moduleForm).then((res) => {
  211. if (res.status !== 200) return;
  212. this.$message.success("修改成功!");
  213. this.dialogVisible = false;
  214. this.moduleForm = {
  215. name: "",
  216. status: 5,
  217. category_id: "",
  218. };
  219. this.onSubmit()
  220. });
  221. }
  222. });
  223. },
  224. /* 获取分类 */
  225. async initCategoryList() {
  226. let _this = this;
  227. let res = await getAllList();
  228. this.categoryList = res.data; //this.processDataForCascader(res.data);
  229. },
  230. EditorInfo(item){
  231. this.dialogVisible=true
  232. this.moduleForm =item
  233. },
  234. checkAuth(path) {
  235. if (this.roleInfo.is_admin == 1) {
  236. return true;
  237. }
  238. let auth = this.authList.filter((o) => o.type == 999 && o.path == path);
  239. if (auth.length > 0) {
  240. return true;
  241. }
  242. return false;
  243. },
  244. btnDelete(e) {
  245. let _this = this;
  246. let par = {
  247. id: e,
  248. };
  249. _this
  250. .$confirm("您是否确认删除该记录?", "提示", {
  251. confirmButtonText: "确认",
  252. cancelButtonText: "取消",
  253. type: "warning",
  254. })
  255. .then((res) => {
  256. // console.log("AAA")
  257. deleteTemplate(par).then((res) => {
  258. _this.search();
  259. });
  260. })
  261. .catch(() => {});
  262. },
  263. searchData() {
  264. let _this = this;
  265. _this.dialogVisible = false;
  266. _this.search();
  267. },
  268. //编辑
  269. btnEdit(e) {
  270. let _this = this;
  271. var a = document.createElement("a");
  272. a.href = "#/document/create?templateId=" + e + "&type=module";
  273. a.target = "_blank";
  274. a.click();
  275. //this.$router.push({path:"/document/create",query:{templateId:e}})
  276. },
  277. handleClose() {
  278. let _this = this;
  279. _this.currentDataId = 0;
  280. _this.dialogVisible = false;
  281. _this.search();
  282. },
  283. //搜索
  284. search() {
  285. let _this = this;
  286. pageTemplate(_this.queryForm).then((res) => {
  287. if (!res) return;
  288. _this.dataList = res.data.dataList;
  289. _this.recordCount = res.data.totalRecord;
  290. _this.pageTotal = res.data.totalPage;
  291. });
  292. },
  293. //修改分页
  294. ChangePage(e) {
  295. let _this = this;
  296. _this.queryForm.page = e;
  297. _this.search();
  298. },
  299. },
  300. };
  301. </script>
  302. <style lang="scss">
  303. @import "./dataList.scss";
  304. </style>