更新

src/mixins/basic-add.js

@@ -0,0 +1,99 @@
+/*
+ * @Author: zwq
+ * @Date: 2022-08-24 11:19:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-01-05 10:54:13
+ * @Description: 
+ */
+export default {
+  data() {
+    /* eslint-disable */
+    return {
+      urlOptions: {
+        submitURL: '',
+        infoURL: '',
+        getOption: false,
+        optionArrUrl: [],
+        optionArr: {}
+      },
+      visible: false,
+      setData:false
+    }
+  },
+  created() {
+  },
+  activated() {
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || "";
+      this.visible = true;
+      if (this.urlOptions.getOption) {
+        this.getArr()
+      }
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.id) {
+          this.$http
+            .get(`${this.urlOptions.infoURL}/${this.dataForm.id}`)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.dataForm = res.data;
+              if(this.setData){
+                this.setDataForm()
+              }
+            })
+            .catch(() => { });
+        }
+      });
+    },
+    getArr() {
+      this.urlOptions.optionArrUrl.forEach((item, index) => {
+        this.$http
+          .get(item, {
+            params: {
+              page: 1,
+              limit: 500,
+            },
+          })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.$set(this.urlOptions.optionArr, `arr${index}`, res.data.list)
+          })
+          .catch(() => {
+          });
+      });
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.$http[!this.dataForm.id ? "post" : "put"](this.urlOptions.submitURL, this.dataForm)
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.$message({
+              message: this.$t("prompt.success"),
+              type: "success",
+              duration: 500,
+              onClose: () => {
+                this.visible = false;
+                this.$emit("refreshDataList");
+              },
+            });
+          })
+          .catch(() => { });
+      });
+    },
+    formClear() {
+      this.$refs.dataForm.resetFields()
+    }
+  }
+}

src/mixins/basic-page.js

@@ -0,0 +1,193 @@
+/*
+ * @Author: zwq
+ * @Date: 2022-08-24 11:19:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-01-05 14:24:29
+ * @Description: 
+ */
+export default {
+  data() {
+    /* eslint-disable */
+    return {
+      urlOptions: {
+        getDataListURL: '',
+        deleteURL: '',
+        statusUrl: '',
+        exportUrl: ''
+      },
+      addOrEditTitle: '',
+      tableData: [],
+      listQuery: {
+        limit: 10,
+        page: 1,
+        total: 1,
+      },
+      dataListLoading: false,
+      addOrUpdateVisible: false,
+    }
+  },
+  created() {
+  },
+  activated() {
+    this.getDataList();
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http
+        .get(this.urlOptions.getDataListURL, {
+          params: this.listQuery,
+        })
+        .then(({ data: res }) => {
+          this.dataListLoading = false;
+          if (res.code !== 0) {
+            this.tableData = [];
+            this.listQuery.total = 0;
+            return this.$message.error(res.msg);
+          }
+          this.tableData = res.data.list;
+          this.listQuery.total = res.data.total;
+        })
+        .catch(() => {
+          this.dataListLoading = false;
+        });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.listQuery.limit = val;
+      this.listQuery.page = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.listQuery.page = val;
+      this.getDataList();
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id);
+      });
+    },
+    cancel(id) {
+      this.$refs["popover-" + id].showPopper = false;
+    },
+    //改变状态
+    changeStatus(id) {
+      this.$http
+        .post(this.urlOptions.statusUrl, { id })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.$refs["popover-" + id].showPopper = false;
+          this.$message({
+            message: this.$t("prompt.success"),
+            type: "success",
+            duration: 500,
+            onClose: () => {
+              this.getDataList();
+            },
+          });
+        })
+        .catch(() => { });
+    },
+    //tableBtn点击
+    handleClick(val) {
+      if (val.type === "edit") {
+        this.addOrUpdateVisible = true;
+        this.addOrEditTitle = "编辑";
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(val.data.id);
+        });
+      } else if (val.type === "delete") {
+        this.deleteHandle(val.data.id,val.data.name)
+      }
+    },
+    // 删除
+    deleteHandle(id, name) {
+      this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$http.delete(this.urlOptions.deleteURL, { data: [id] }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.getDataList();
+                },
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        })
+        .catch(() => { });
+    },
+    //search-bar点击
+    buttonClick(val) {
+      switch (val.btnName) {
+        case "search":
+          this.listQuery.xm1 = val.xm1;
+          this.listQuery.xm2 = val.xm2;
+          this.listQuery.page = 1;
+          this.getDataList();
+          break;
+        case "add":
+          this.addOrEditTitle = '新增'
+          this.addOrUpdateVisible = true;
+          this.addOrUpdateHandle()
+          break;
+        default:
+          console.log(val)
+       }
+    },
+    handleCancel() {
+      this.$refs.addOrUpdate.formClear()
+      this.addOrUpdateVisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.addOrUpdate.dataFormSubmit()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getDataList()
+    },
+    // 导出
+    exportHandle(name) {
+      this.$http
+        .get(this.urlOptions.exportUrl, { responseType: "blob" })
+        .then(({ data: res }) => {
+          var date = new Date();
+          var year = date.getFullYear();
+          var month = date.getMonth() + 1;
+          var strDate = date.getDate();
+          if (month >= 1 && month <= 9) {
+            month = "0" + month;
+          }
+          if (strDate >= 0 && strDate <= 9) {
+            strDate = "0" + strDate;
+          }
+          var currentdate = year + "-" + month + "-" + strDate;
+          const blob = new Blob([res]);
+          const downloadElement = document.createElement("a");
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href;
+          downloadElement.download = `${name + currentdate}.xls`; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href);
+        })
+        .catch(() => { });
+    }
+  }
+}

src/mixins/process-page.js

@@ -0,0 +1,152 @@
+/*
+ * @Author: zwq
+ * @Date: 2022-08-24 11:19:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-09-16 14:19:44
+ * @Description: 
+ */
+export default {
+    data () {
+      /* eslint-disable */
+      return {
+        urlOptions: {
+          getDataListURL: '',
+          deleteURL: '',
+          statusUrl: '',
+          exportUrl: ''
+        },
+        dataList: [],
+        dataForm: {},
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        addOrUpdateVisible: false,
+      }
+    },
+    created () {
+    },
+    activated() {
+      this.getDataList();
+    },
+    methods: {
+    // 获取数据列表
+    getDataList() {
+        this.dataListLoading = true;
+        this.$http
+          .get(this.urlOptions.getDataListURL, {
+            params: {
+              page: this.pageIndex,
+              limit: this.pageSize,
+              ...this.dataForm
+            },
+          })
+          .then(({ data: res }) => {
+            this.dataListLoading = false;
+            if (res.code !== 0) {
+              this.dataList = [];
+              this.totalPage = 0;
+              return this.$message.error(res.msg);
+            }
+            this.dataList = res.data.list;
+            this.totalPage = res.data.total;
+          })
+          .catch(() => {
+            this.dataListLoading = false;
+          });
+      },
+      // 每页数
+      sizeChangeHandle(val) {
+        this.pageSize = val;
+        this.pageIndex = 1;
+        this.getDataList();
+      },
+      // 当前页
+      currentChangeHandle(val) {
+        this.pageIndex = val;
+        this.getDataList();
+      },
+      // 新增 / 修改
+      addOrUpdateHandle(id) {
+        this.addOrUpdateVisible = true;
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id);
+        });
+      },
+      cancel(id) {
+        this.$refs["popover-" + id].showPopper = false;
+      },
+      changeStatus(id) {
+        this.$http
+          .post(this.urlOptions.statusUrl, { id })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.$refs["popover-" + id].showPopper = false;
+            this.$message({
+              message: this.$t("prompt.success"),
+              type: "success",
+              duration: 500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          })
+          .catch(() => {});
+      },
+      // 删除
+      deleteHandle(id, name) {
+        this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.$http.delete(this.urlOptions.deleteURL, { data: [id] }).then(({ data }) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.getDataList();
+                  },
+                });
+              } else {
+                this.$message.error(data.msg);
+              }
+            });
+          })
+          .catch(() => {});
+      },
+      // 导出
+      exportHandle(name) {
+          this.$http
+            .get(this.urlOptions.exportUrl, { responseType: "blob" })
+            .then(({ data: res }) => {
+              var date = new Date();
+              var year = date.getFullYear();
+              var month = date.getMonth() + 1;
+              var strDate = date.getDate();
+              if (month >= 1 && month <= 9) {
+                month = "0" + month;
+              }
+              if (strDate >= 0 && strDate <= 9) {
+                strDate = "0" + strDate;
+              }
+              var currentdate = year + "-" + month + "-" + strDate;
+              const blob = new Blob([res]);
+              const downloadElement = document.createElement("a");
+              const href = window.URL.createObjectURL(blob); // 创建下载的链接
+              downloadElement.href = href;
+              downloadElement.download = `${name+currentdate}.xls`; // 下载后文件名
+              document.body.appendChild(downloadElement);
+              downloadElement.click(); // 点击下载
+              document.body.removeChild(downloadElement); // 下载完成移除元素
+              window.URL.revokeObjectURL(href);
+            })
+            .catch(() => {});
+        }
+    }
+}

src/mixins/view-module.js

@@ -0,0 +1,163 @@
+import Cookies from 'js-cookie'
+import qs from 'qs'
+export default {
+  data () {
+    /* eslint-disable */
+    return {
+      // 设置属性
+      mixinViewModuleOptions: {
+        createdIsNeed: true,       // 此页面是否在创建时，调用查询数据列表接口？
+        activatedIsNeed: false,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
+        getDataListURL: '',       // 数据列表接口，API地址
+        getDataListIsPage: false, // 数据列表接口，是否需要分页？
+        deleteURL: '',            // 删除接口，API地址
+        deleteIsBatch: false,     // 删除接口，是否需要批量？
+        deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
+        exportURL: ''             // 导出接口，API地址
+      },
+      // 默认属性
+      dataForm: {},               // 查询条件
+      dataList: [],               // 数据列表
+      order: '',                  // 排序，asc／desc
+      orderField: '',             // 排序，字段
+      page: 1,                    // 当前页码
+      limit: 10,                  // 每页数
+      total: 0,                   // 总条数
+      dataListLoading: false,     // 数据列表，loading状态
+      dataListSelections: [],     // 数据列表，多选项
+      addOrUpdateVisible: false   // 新增／更新，弹窗visible状态
+    }
+    /* eslint-enable */
+  },
+  created () {
+    if (this.mixinViewModuleOptions.createdIsNeed) {
+      this.query()
+    }
+  },
+  activated () {
+    if (this.mixinViewModuleOptions.activatedIsNeed) {
+      this.query()
+    }
+  },
+  methods: {
+    // 获取数据列表
+    query () {
+      this.dataListLoading = true
+      this.$http.get(
+        this.mixinViewModuleOptions.getDataListURL,
+        {
+          params: {
+            order: this.order?this.order:null,
+            orderField: this.orderField?this.orderField:null,
+            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
+            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
+            ...this.dataForm
+          }
+        }
+      ).then(({ data: res }) => {
+        this.dataListLoading = false
+        if (res.code !== 0) {
+          this.dataList = []
+          this.total = 0
+          return this.$message.error(res.msg)
+        }
+        this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
+        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+      }).catch(() => {
+        this.dataListLoading = false
+      })
+    },
+    // 多选
+    dataListSelectionChangeHandle (val) {
+      this.dataListSelections = val
+    },
+    // 排序
+    dataListSortChangeHandle (data) {
+      if (!data.order || !data.prop) {
+        this.order = ''
+        this.orderField = ''
+        return false
+      }
+      this.order = data.order.replace(/ending$/, '')
+      this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
+      this.query()
+    },
+    // 分页, 每页条数
+    pageSizeChangeHandle (val) {
+      this.page = 1
+      this.limit = val
+      this.query()
+    },
+    // 分页, 当前页
+    pageCurrentChangeHandle (val) {
+      this.page = val
+      this.query()
+    },
+    getDataList: function () {
+      this.page = 1
+      this.query()
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.dataForm.id = id
+        this.$refs.addOrUpdate.init()
+      })
+    },
+    // 关闭当前窗口
+    closeCurrentTab (data) {
+      var tabName = this.$store.state.contentTabsActiveName
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
+      if (this.$store.state.contentTabs.length <= 0) {
+        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
+        return false
+      }
+      if (tabName === this.$store.state.contentTabsActiveName) {
+        this.$router.push({ name: this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1].name })
+      }
+    },
+    // 删除
+    deleteHandle (id) {
+      if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) {
+        return this.$message({
+          message: this.$t('prompt.deleteBatch'),
+          type: 'warning',
+          duration: 500
+        })
+      }
+      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.delete(
+          `${this.mixinViewModuleOptions.deleteURL}${this.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id}`,
+          this.mixinViewModuleOptions.deleteIsBatch ? {
+            'data': id ? [id] : this.dataListSelections.map(item => item[this.mixinViewModuleOptions.deleteIsBatchKey])
+          } : {}
+        ).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.query()
+            }
+          })
+        }).catch(() => {})
+      }).catch(() => {})
+    },
+    // 导出
+    exportHandle () {
+      var params = qs.stringify({
+        'token': Cookies.get('token'),
+        ...this.dataForm
+      })
+      window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportURL}?${params}`
+    }
+  }
+}