添加ERP启动页面以及修改Keepalive缓存问题

src/common/components/base/CustomForm.vue

@@ -176,7 +176,7 @@ export default {
           </el-form-item>
         ))}
         {this.isCustomButton && (
-          <el-form-item>
+          <el-form-item style="margin-right:5px">
             <el-button
               type="primary"
               onClick={this.search}

src/main.js

@@ -23,13 +23,9 @@ Vue.use(element)
 Vue.use(vxeTable)
 
 const clientWidth = document.body.clientWidth
-const dpi = _.add(
-  _.ceil(_.divide(clientWidth / 1920)) + 0.5,
-)
+const dpi = _.add(_.ceil(_.divide(clientWidth / 1920)) + 0.5)
 let imagePath = ''
-if (
-  md5(location.host) === '42f2b26039d7fd526b8a1d50bb329cbc'
-) {
+if (md5(location.host) === '42f2b26039d7fd526b8a1d50bb329cbc') {
   localStorage.setItem('locationHost', location.host)
   imagePath = zImgPath
 } else if (zImgPath.indexOf('/erpimg') !== -1) {
@@ -41,14 +37,10 @@ Vue.prototype.setimgUrl = (url, options = {}) => {
   const { w, h, ...others } = options
   let query = ''
   if (w) {
-    query += query
-      ? '&w='
-      : 'w=' + _.floor(_.multiply(dpi * w))
+    query += query ? '&w=' : 'w=' + _.floor(_.multiply(dpi * w))
   }
   if (h) {
-    query += query
-      ? '&h='
-      : 'h=' + _.floor(_.multiply(dpi * h))
+    query += query ? '&h=' : 'h=' + _.floor(_.multiply(dpi * h))
   }
   for (const key in others) {
     query += `${query ? '&' : ''}${key}=${options[key]}`
@@ -70,6 +62,7 @@ router.afterEach((to, from) => {
     name: to.name,
     path: to.fullPath,
     title: to.meta?.title || to.name,
+    meta: to.meta
   })
   store.commit('tags/setActive', to.name)
 })
@@ -87,5 +80,5 @@ router.beforeEach((to, form, next) => {
 new Vue({
   router,
   store,
-  render: (h) => h(App),
+  render: (h) => h(App)
 }).$mount('#app')

src/router/index.js

@@ -76,7 +76,13 @@ const routes = [
         path: '/saas/services',
         component: () => import('@/views/system/services.vue'),
         name: 'system_services',
-        meta: { title: '服务管理' }
+        meta: { title: '服务管理', keepAlive: false }
+      },
+      {
+        path: '/saas/erpManagementList',
+        component: () => import('@/views/system/erpManagementList.vue'),
+        name: 'erpManagementList',
+        meta: { title: 'ERP启动列表' }
       },
       {
         path: '/saas/countryCode',
@@ -96,6 +102,7 @@ const routes = [
         name: 'system_management',
         meta: { title: '客户管理' }
       },
+
       {
         path: '/saas/user/recharge-record',
         component: () => import('@/views/user/rechargeRecord.vue'),
@@ -151,6 +158,12 @@ const routes = [
         meta: { title: '异常消息' }
       },
       {
+        path: '/operation/asynchronousTask',
+        component: () => import('@/views/operation/asynchronousTask.vue'),
+        name: 'asynchronousTask',
+        meta: { title: '异步任务' }
+      },
+      {
         path: '/saas/production/assistant/manage',
         component: () => import('@/views/production/AssistantManage.vue'),
         name: 'production_assistant_manage',

src/views/home/HomeView.vue

@@ -22,18 +22,29 @@ export default {
   name: 'HomeView',
   components: {
     NavMenu,
-    HomeHeader,
+    HomeHeader
   },
   computed: {
     ...mapState('tags', ['tags']),
     cacheView() {
+      // 在router中meta.keepAlive设置为true才能开启缓存
+
       const arr = []
-      return arr.concat(this.tags.map((item) => item.name))
-    },
+      return arr.concat(
+        this.tags
+          .map((item) => {
+            if (item.meta && item.meta.keepAlive) {
+              return item.name
+            }
+            return null
+          })
+          .filter((el) => el !== null)
+      )
+    }
   },
   data() {
     return {}
-  },
+  }
 }
 </script>
 <style lang="scss" scoped>

src/views/home/navMenu.vue

@@ -384,6 +384,14 @@ export default {
               children: []
             },
             {
+              id: 6_2,
+              path: '',
+              label: '异步任务',
+              icon: 'el-icon-postcard',
+              index: '/operation/asynchronousTask',
+              children: []
+            },
+            {
               id: 9,
               path: '',
               label: 'sql执行工具',

src/views/operation/asynchronousTask.vue

+<template>
+  <div class="wraper">
+    <CustomForm
+      :formConfig="queryformConfig"
+      v-model="queryFormData"
+      formLabelWidth="70px"
+      :isCustomButton="false"
+      :isFlex="false">
+      <template slot="btn">
+        <el-button type="primary" icon="el-icon-search" @click="search">
+          查询
+        </el-button>
+      </template>
+    </CustomForm>
+    <div class="table_wrap" v-loading="loading">
+      <table-vue
+        :sourceData="sourceData"
+        ref="multipleTable"
+        :tableColumns="usersTableColumns"></table-vue>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        layout="sizes, total, prev, pager, next, jumper"
+        background
+        :total="paginationOptions.total"
+        :page-size="paginationOptions.pageSize"
+        :current-page="paginationOptions.currentPage"
+        @size-change="sizeChange"
+        @current-change="onCurrentChange"></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import axios from '../../common/api/axios'
+import CustomForm from '@/common/components/base/CustomForm.vue'
+import { mapState } from 'vuex'
+import tableVue from '@/common/components/base/tableView.vue'
+
+export default {
+  name: 'asynchronousTask',
+  components: {
+    tableVue,
+    CustomForm
+  },
+  data() {
+    return {
+      is_title: 1,
+      ishowForm: false,
+      select: '',
+      sourceData: [],
+      serviceNameList: { sysService: '系统服务同步' },
+      formData: {},
+      queryFormData: {},
+      queryformConfig: [
+        {
+          prop: 'timeRange',
+          type: 'datePicker',
+          dateType: 'datetimerange',
+          name: ' 提交时间',
+          attrs: {
+            'start-placeholder': '开始时间',
+            'end-placeholder': '结束时间',
+            'value-format': 'yyyy-MM-dd HH:mm:ss',
+            'default-time': ['00:00:00', '23:59:59']
+          }
+        },
+        {
+          prop: 'runStatus',
+          type: 'select',
+          name: '状态',
+          options: [
+            { label: '进行中', value: 0 },
+            { label: '完成', value: 1 },
+            { label: '失败', value: 2 }
+          ]
+        }
+      ],
+
+      dialogVisible: false,
+      formId: null,
+
+      paginationOptions: {
+        pageSize: 100,
+        currentPage: 1,
+        total: 0
+      },
+      details: [],
+      loading: false
+    }
+  },
+  async created() {
+    // await this.getServiceNameList()
+
+    this.getList()
+  },
+  computed: {
+    ...mapState(['reqMenu', 'employee']),
+    usersTableColumns() {
+      return [
+        {
+          label: '任务类型',
+          key: 'taskType',
+          render: (item) => <span>{this.serviceNameList[item.taskType]}</span>
+        },
+        {
+          label: '任务标题',
+          key: 'taskTitle',
+          width: ''
+        },
+        {
+          label: '异常信息',
+          key: 'exceptionMsg',
+          width: ''
+        },
+        {
+          label: '状态',
+          key: 'runStatus',
+          width: '',
+          render: (item) => (
+            <span class={['text', this.getColor(item.runStatus)]}>
+              {item.runStatus === 0
+                ? '进行中'
+                : item.runStatus === 1
+                ? '完成'
+                : '失败'}
+            </span>
+          )
+        },
+        {
+          label: '操作人',
+          key: 'operatorName',
+          width: '100'
+        },
+        {
+          label: '提交时间',
+          key: 'submitTime',
+          width: ''
+        },
+        {
+          label: '开始时间',
+          key: 'startTime',
+          width: ''
+        },
+        {
+          label: '结束时间',
+          key: 'endTime',
+          width: '100'
+        },
+        {
+          label: '相关操作',
+          key: '',
+          fixed: 'right',
+          width: '130',
+          render: (item) =>
+            (item.runStatus !== 1 && (
+              <div>
+                <span
+                  title="重新发送"
+                  class="icon-view resendMsg"
+                  onClick={() => this.resendMsg(item.id)}>
+                  <i class="el-icon-s-promotion"></i>
+                </span>
+              </div>
+            )) ||
+            ''
+        }
+      ]
+    }
+  },
+
+  methods: {
+    sizeChange(value) {
+      this.paginationOptions.pageSize = value
+      this.getList()
+    },
+    onCurrentChange(value) {
+      this.paginationOptions.currentPage = value
+      this.getList()
+    },
+    selectionChange(selection) {
+      if (selection.length > 0) {
+        this.select = selection
+      }
+    },
+
+    search() {
+      if (this.queryFormData.timeRange && this.queryFormData.timeRange.length) {
+        this.queryFormData.minSubmitTime = this.queryFormData.timeRange[0]
+        this.queryFormData.maxSubmitTime = this.queryFormData.timeRange[1]
+      }
+      this.getList()
+    },
+
+    // 查询
+    getList() {
+      this.loading = true
+      const { pageSize, currentPage } = this.paginationOptions
+      axios
+        .post('sys/syncTaskLog/list_page ', {
+          pageSize,
+          currentPage,
+          ...this.queryFormData
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.sourceData = res.data.records
+            this.paginationOptions.total = res.data.total
+          } else {
+            this.$alert(res.message, '错误提示', {
+              dangerouslyUseHTMLString: true
+            })
+          }
+          this.loading = false
+        })
+    },
+
+    async resendMsg(id) {
+      const params = { id }
+      try {
+        this.$confirm('确认发送？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(async () => {
+            await axios.get('sys/syncTaskLog/retry_send', { params })
+            this.$message.success('发送成功')
+            this.getList()
+          })
+          .catch(() => {
+            this.$message.warning('取消发送')
+          })
+      } catch (error) {
+        console.log(error)
+        this.$message.warning(error.message)
+      } finally {
+        this.loading = false
+      }
+    },
+    getColor(status) {
+      if (status === 0) {
+        return 'afootStatus'
+      } else if (status === 1) {
+        return 'successStatus'
+      } else {
+        return 'failStatus'
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.wraper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.table_wrap {
+  flex: 1;
+}
+
+.circle {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  border-radius: 5px;
+  margin-right: 5px;
+}
+
+.my-table .first {
+  background-color: red !important;
+  color: #fff !important;
+}
+::v-deep.switchStyle .el-switch__label {
+  position: absolute;
+  display: none;
+  color: #fff;
+  span {
+    font-size: 12px !important;
+  }
+}
+.el-switch__core {
+  background-color: rgba(166, 166, 166, 1);
+}
+::v-deep.switchStyle .el-switch__label--left {
+  z-index: 9;
+  left: 20px;
+}
+::v-deep.switchStyle .el-switch__label--right {
+  z-index: 9;
+  right: 20px;
+}
+::v-deep.switchStyle .el-switch__label.is-active {
+  display: block;
+}
+::v-deep.switchStyle.el-switch .el-switch__core,
+.el-switch .el-switch__label {
+  width: 50px !important;
+}
+.resendMsg {
+  background-color: #ff9900;
+  &:hover {
+    background-color: #ffd36a;
+  }
+}
+.text {
+  color: #fff;
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+.afootStatus {
+  background-color: #409eff;
+}
+.successStatus {
+  background-color: #67c23a;
+}
+.failStatus {
+  background-color: #f56c6c;
+}
+</style>

src/views/system/erpManagementList.vue

+<template>
+  <div class="wraper">
+    <div class="table_wrap" v-loading="loading">
+      <table-vue
+        :sourceData="sourceData"
+        ref="multipleTable"
+        :tableColumns="usersTableColumns"
+        @currentChange="currentTabFn"
+        @selectionChange="selectionChange"></table-vue>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        layout="sizes, total, prev, pager, next, jumper"
+        background
+        :total="paginationOptions.total"
+        :page-size="paginationOptions.pageSize"
+        :current-page="paginationOptions.currentPage"
+        @size-change="sizeChange"
+        @current-change="onCurrentChange"></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import axios from '../../common/api/axios'
+// import CustomForm from '@/common/components/base/CustomForm.vue'
+import { mapState } from 'vuex'
+import tableVue from '@/common/components/base/tableView.vue'
+
+export default {
+  name: 'erpManagementList',
+  components: {
+    tableVue
+  },
+  data() {
+    return {
+      is_title: 1,
+      ishowForm: false,
+      select: '',
+      sourceData: [],
+      serviceNameList: new Map(),
+      formData: {},
+      queryFormData: {},
+      queryformConfig: [
+        {
+          prop: 'name',
+          type: 'select',
+          name: '名称',
+          options: []
+        },
+        {
+          prop: 'type',
+          type: 'select',
+          name: '服务类型',
+          options: [
+            { label: '基础', value: 'basics' },
+            { label: '增值', value: 'appreciation' }
+          ]
+        },
+        {
+          prop: 'enable',
+          type: 'select',
+          name: '状态',
+          options: [
+            { label: '启用', value: true },
+            { label: '停用', value: false }
+          ]
+        }
+      ],
+
+      dialogVisible: false,
+      formId: null,
+
+      paginationOptions: {
+        pageSize: 100,
+        currentPage: 1,
+        total: 0
+      },
+      details: [],
+      loading: false
+    }
+  },
+  async created() {
+    await this.getServiceNameList()
+
+    this.getList()
+  },
+  computed: {
+    ...mapState(['reqMenu', 'employee']),
+    usersTableColumns() {
+      return [
+        {
+          label: 'namespace',
+          key: 'namespace'
+        },
+        {
+          label: '服务名称',
+          key: 'name',
+
+          render: (item) => (
+            <span>{this.serviceNameList.get(item.name).label}</span>
+          )
+        },
+        {
+          label: '服务类型',
+          key: 'type',
+
+          render: (item) => (
+            <span>{item.type === 'basics' ? '基础' : '增值'}</span>
+          )
+        },
+
+        {
+          label: '收费标准',
+          key: 'rates'
+        },
+
+        {
+          label: '状态',
+          key: 'enable',
+          width: '100',
+
+          render: (item) => <span>{item.enable ? '启用' : '停用'}</span>
+        },
+
+        {
+          label: '是否参与折扣',
+          key: 'discount',
+          width: '100',
+
+          render: (item) => <span>{item.discount === true ? '是' : '否'}</span>
+        }
+      ]
+    },
+
+    funcRoleList() {
+      if (this.roleList.length > 0) {
+        return this.roleList.filter((item) => item.type === 'FUNCTION_ROLE')
+      }
+      return []
+    },
+    dataRoleList() {
+      if (this.roleList.length > 0) {
+        return this.roleList.filter((item) => item.type === 'DATA_ROLE')
+      }
+      return []
+    }
+  },
+  watch: {
+    formData: {
+      handler(newValue) {
+        // console.log(368, newValue)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    sizeChange(value) {
+      this.paginationOptions.pageSize = value
+      this.getList()
+    },
+    onCurrentChange(value) {
+      this.paginationOptions.currentPage = value
+      this.getList()
+    },
+    selectionChange(selection) {
+      if (selection.length > 0) {
+        this.select = selection
+      }
+    },
+
+    setempNo(id) {
+      for (const iterator of this.employee) {
+        if (iterator.id === id) {
+          this.addcurrencyform.empNumber = iterator.empNumber
+          break
+        }
+      }
+    },
+    search() {
+      this.getList()
+    },
+    currentTabFn(val) {
+      if (val.row) {
+        this.formId = val.row.id
+      }
+    },
+    // 修改新增
+    async addDialog(id, e) {
+      e && e.stopPropagation()
+      this.ishowForm = true
+      try {
+        if (id) {
+          this.is_title = 2
+          const url = '/serviceManagement/get'
+          const res = await axios.get(url, { params: { id } })
+
+          this.formData = { ...res.data }
+          this.formData.nameObj = this.serviceNameList.get(this.formData.name)
+          this.formData.serveType =
+            this.serviceNameList.get(this.formData.name).type === 'basics'
+              ? '基础'
+              : '增值'
+          console.log(289, this.formData)
+        } else {
+          this.is_title = 1
+        }
+        this.dialogVisible = true
+      } catch (error) {}
+    },
+    async checkData() {
+      const [isValid, postData] = await Promise.all([
+        new Promise((resolve) => {
+          this.$refs.formRefs
+            .validateForm()
+            .then((res) => resolve(true))
+            .catch((err) => {
+              resolve(false)
+              console.log(err)
+            })
+        }),
+        new Promise((resolve) => {
+          const params = {
+            name: '',
+            id: '',
+            type: '',
+            tollCollectionManner: '',
+            rates: '',
+            enable: '',
+            discount: '',
+            remarks: ''
+          }
+          for (const key in params) {
+            params[key] = this.formData[key]
+          }
+          resolve(params)
+        })
+      ])
+      console.log(isValid, postData)
+
+      return { isValid, postData }
+    },
+
+    // 新增
+    async addServiceManagement() {
+      const isAdd = this.is_title === 1
+      const url = isAdd ? '/serviceManagement/add' : '/serviceManagement/update'
+      try {
+        const { isValid, postData } = await this.checkData()
+        if (isValid) {
+          console.log('add', this.formData)
+          const finalData = isAdd ? { ...postData, id: undefined } : postData
+          const res = await axios.post(url, finalData)
+          if (res.code !== 200) {
+            return
+          }
+
+          this.dialogVisible = false
+          this.getList()
+          this.$message.success(isAdd ? '新增成功' : '更新成功')
+        } else {
+          console.log()
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 查询
+    getList() {
+      this.loading = true
+      const { pageSize, currentPage } = this.paginationOptions
+      axios
+        .post('serviceManagementLog/list_page', {
+          pageSize,
+          currentPage,
+          ...this.queryFormData
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.sourceData = res.data.records
+            this.paginationOptions.total = res.data.total
+          } else {
+            this.$alert(res.message, '错误提示', {
+              dangerouslyUseHTMLString: true
+            })
+          }
+          this.loading = false
+        })
+    },
+
+    // 删除
+    deleteSection(data, e) {
+      e && e.stopPropagation()
+      const ids = [data.id].join()
+      this.$confirm('确定删除选中的信息？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          axios
+            .get('serviceManagement/delete', {
+              params: {
+                ids
+              }
+            })
+            .then((res) => {
+              if (res.code === 200) {
+                this.$message({
+                  type: 'success',
+                  message: '删除成功!'
+                })
+                this.getList()
+              }
+            })
+        })
+        .catch(() => {})
+    },
+    async closedFn() {
+      this.dialogVisible = false
+
+      this.formData = { enable: true, discount: true }
+      await this.$refs.formRefs?.resetFields()
+    },
+    async getServiceNameList() {
+      try {
+        const { data } = await axios.get('serviceManagement/serviceNameList')
+        const newData = data.map((el) => {
+          return {
+            label: el.remark,
+            value: el.code,
+            type: el.type
+          }
+        })
+        this.serviceNameList = new Map(
+          newData.map((item) => [
+            item.value,
+            { label: item.label, type: item.type, value: item.value }
+          ])
+        )
+        console.log(509, this.serviceNameList)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async enableChange(item, value) {
+      this.loading = true
+      try {
+        const params = {
+          id: item.id,
+          status: value
+        }
+        console.log(item, value)
+
+        await axios.get('/serviceManagement/updateStatus', { params })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async updateListFn() {
+      this.loading = true
+      try {
+        await axios.get('serviceManagement/syncErp')
+      } catch (error) {
+        console.log(error)
+        this.$message.warning(error.message)
+      } finally {
+        this.loading = false
+      }
+    },
+    toList() {}
+  }
+}
+</script>
+<style scoped lang="less">
+.wraper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.table_wrap {
+  flex: 1;
+}
+
+.circle {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  border-radius: 5px;
+  margin-right: 5px;
+}
+
+.my-table .first {
+  background-color: red !important;
+  color: #fff !important;
+}
+::v-deep.switchStyle .el-switch__label {
+  position: absolute;
+  display: none;
+  color: #fff;
+  span {
+    font-size: 12px !important;
+  }
+}
+.el-switch__core {
+  background-color: rgba(166, 166, 166, 1);
+}
+::v-deep.switchStyle .el-switch__label--left {
+  z-index: 9;
+  left: 20px;
+}
+::v-deep.switchStyle .el-switch__label--right {
+  z-index: 9;
+  right: 20px;
+}
+::v-deep.switchStyle .el-switch__label.is-active {
+  display: block;
+}
+::v-deep.switchStyle.el-switch .el-switch__core,
+.el-switch .el-switch__label {
+  width: 50px !important;
+}
+</style>

src/views/system/services.vue

@@ -3,11 +3,13 @@
     <CustomForm
       :formConfig="queryformConfig"
       v-model="queryFormData"
+      form-label-width="70px"
       @addDialog="addDialog"
       @searchFn="search"
       :isFlex="false">
       <template slot="btn">
         <el-button type="primary" @click="updateListFn">同步</el-button>
+        <el-button type="primary" @click="toList">查看ERP启动列表</el-button>
       </template>
     </CustomForm>
     <div class="table_wrap" v-loading="loading">
@@ -68,7 +70,7 @@ import { mapState } from 'vuex'
 import tableVue from '@/common/components/base/tableView.vue'
 
 export default {
-  name: 'system_users',
+  name: 'system_services',
   components: {
     tableVue,
     CustomForm
@@ -79,7 +81,7 @@ export default {
       ishowForm: false,
       select: '',
       sourceData: [],
-      serviceNameList: [],
+      serviceNameList: new Map(),
       formData: {},
       queryFormData: {},
       queryformConfig: [
@@ -90,6 +92,15 @@ export default {
           options: []
         },
         {
+          prop: 'type',
+          type: 'select',
+          name: '服务类型',
+          options: [
+            { label: '基础', value: 'basics' },
+            { label: '增值', value: 'appreciation' }
+          ]
+        },
+        {
           prop: 'enable',
           type: 'select',
           name: '状态',
@@ -212,8 +223,8 @@ export default {
       loading: false
     }
   },
-  created() {
-    this.getServiceNameList()
+  async created() {
+    await this.getServiceNameList()
 
     this.getList()
   },
@@ -239,7 +250,7 @@ export default {
           )
         },
         {
-          label: '收费方式',
+          label: '收费方式（￥）',
           key: 'tollCollectionManner',
           width: '',
 
@@ -565,6 +576,9 @@ export default {
       } finally {
         this.loading = false
       }
+    },
+    toList() {
+      this.$router.push('/saas/erpManagementList')
     }
   }
 }