月度计划审批显示+流程联调

.eslintrc.js

@@ -8,7 +8,258 @@ module.exports = {
     parser: "babel-eslint",
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        singleline: 15,
+        multiline: {
+          max: 1,
+          allowFirstLine: false
+        }
+      }
+    ],
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/name-property-casing': ['error', 'kebab-case'], // |PascalCase
+    'vue/require-default-prop': 'off',
+    'vue/no-v-html': 'off',
+    'accessor-pairs': 2,
+    'arrow-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'block-spacing': [2, 'always'],
+    'brace-style': [
+      2,
+      '1tbs',
+      {
+        allowSingleLine: true
+      }
+    ],
+    camelcase: [
+      0,
+      {
+        properties: 'always'
+      }
+    ],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    curly: [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'generator-star-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'handle-callback-err': [2, '^(err|error)$'],
+    indent: [
+      2,
+      2,
+      {
+        SwitchCase: 1
+      }
+    ],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [
+      2,
+      {
+        beforeColon: false,
+        afterColon: true
+      }
+    ],
+    'keyword-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'new-cap': [
+      2,
+      {
+        newIsCap: true,
+        capIsNew: false
+      }
+    ],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [
+      2,
+      {
+        allowLoop: false,
+        allowSwitch: false
+      }
+    ],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [
+      2,
+      {
+        max: 1
+      }
+    ],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [
+      2,
+      {
+        defaultAssignment: false
+      }
+    ],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [
+      2,
+      {
+        vars: 'all',
+        args: 'none'
+      }
+    ],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [
+      2,
+      {
+        initialized: 'never'
+      }
+    ],
+    'operator-linebreak': [
+      2,
+      'after',
+      {
+        overrides: {
+          '?': 'before',
+          ':': 'before'
+        }
+      }
+    ],
+    'padded-blocks': [2, 'never'],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    semi: [2, 'never'],
+    'semi-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [
+      2,
+      {
+        words: true,
+        nonwords: false
+      }
+    ],
+    'spaced-comment': [
+      2,
+      'always',
+      {
+        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+      }
+    ],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    yoda: [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [
+      2,
+      'always',
+      {
+        objectsInObjects: false
+      }
+    ],
+    'array-bracket-spacing': [2, 'never'],
+    'no-async-promise-executor': 'off',
+    'require-atomic-updates': 'off',
+    'no-prototype-builtins': 'off'
   },
 };

src/api/applyForGoods.js

+import request from '@/utils/request'
+import { BASE_API } from '@/api/baseUrl'
+
+/**
+ * 月度计划编制
+ * 根据id查询月度计划申请
+ * @param {*} params
+ */
+export function apiMonthplanFindById({ id }) {
+  return request({
+    url: BASE_API() + '/monthplan/findById?id=' + id,
+    method: 'post'
+  })
+}

src/api/flowHander.js

+import request from '@/utils/request'
+import { BASE_API } from '@/api/baseUrl'
+import { handleFormData } from '@/utils/index'
+
+export function handlerFlow(data, key) {
+  if (data.id) {
+    return saveData(data)
+  } else {
+    return startProcessInstanceByKey(data, key)
+  }
+}
+
+/**
+ * 保存业务数据
+ */
+export function saveData(data) {
+  return request({
+    url: BASE_API() + '/workflow/saveBizData',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: handleFormData(data)
+  })
+}
+
+/**
+ * 退回
+ */
+export function backToApplyActivity(data) {
+  return request({
+    url: BASE_API() + '/workflow/backToApplyActivity',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: handleFormData(data)
+  })
+}
+
+/**
+ * 任务列表
+ */
+export function taskExecutionFindByBizId(params) {
+  return request({
+    url: BASE_API() + '/workflow/taskExecution/findByBizId',
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    params
+  })
+}
+
+/**
+ * 启动流程
+ */
+export function startProcessInstanceByKey(data, key) {
+  data.processDefinitionKey = key
+  data.processAction = 'save'
+  data.flowKind = 'APPROVAL'
+  data.procUnitId = data.id ? 'APPROVE' : 'APPLY'
+
+  return request({
+    url: BASE_API() + '/workflow/startProcessInstanceByKey',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: handleFormData(data)
+  })
+}
+/**
+ * 提交流程
+ */
+export function advance(data) {
+  data.procUnitId = 'approve'
+  data.processAction = 'advance'
+  return request({
+    url: BASE_API() + '/workflow/advance',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: handleFormData(data)
+  })
+}
+/**
+ * 页面离开
+ */
+export function editFlowTest(data) {
+  return request({
+    url: BASE_API() + '/flowTest/editFlowTest',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data
+  })
+}
+/**
+ * 流程轨迹
+ */
+export function queryApprovalHistoryByBizId(data) {
+  return request({
+    url: BASE_API() + '/workflow/queryApprovalHistoryByBizId',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: handleFormData(data)
+  })
+}

src/permission.js

-/* eslint-disable space-before-function-paren */
 import router from './router'
-// import store from './store'
-import { getToken } from '@/utils/auth' // get token from cookie
+import store from './store'
+// import { getToken } from '@/utils/auth' // get token from cookie
 // import { login } from '@/api/login'
 
 // 过滤器白名单
-const whiteList = ['', ''] // no redirect whitelist
+const whiteList = ['/login'] // no redirect whitelist
+// const hasToken = getToken()
 
-router.beforeEach(async (to, from, next) => {
-  // console.log('to---', to)
+router.beforeEach(async to => {
+  const hasToken = store.getters.token
+  console.log('to---', to, hasToken, store)
   if (to.meta.title) {
     document.title = to.meta.title
   }
 
-  const hasToken = getToken()
-
   if (hasToken) {
-    next()
+    return true
+  } else {
+    try {
+      if (whiteList.indexOf(to.path) !== -1) {
+        return true
       } else {
-    if (to.query?.taskToken) {
+        return { path: `/login`, query: { ...to.query } }
+      }
+    } catch (error) {
+      return { path: `/login`, query: { ...to.query } }
+    }
+  }
+
+  // if (hasToken) {
+  //   if (to.path.indexOf('delivery-plan-approve') !== -1) {
+  //     return { replace: true, path: '/month-flow', query: { ...to.query } }
+  //   } else {
+  //     return { replace: true, path: '/month-flow', query: { ...to.query } }
+  //   }
+  // } else {
+  //   if (to.query?.taskToken) {
   //     login({ ...to.query })
   //       .then(async res => {
-      //     if (res.status) {
+  //         if (res.status === 1) {
   //           await store.dispatch('setToken', res.data.token)
   //           store.commit('SET_USERINFO', res.data.operator || {})
-      //       next()
+  //           if (to.path.indexOf('delivery-plan-approve') !== -1) {
+  //             return { path: '/month-flow', query: { ...to.query } }
   //           } else {
-      //       next('/login')
+  //             return true
+  //           }
+  //         } else {
+  //           return { path: `/login?redirect=${to.path}`, query: { ...to.query } }
   //         }
   //       })
   //       .catch(() => {
-      //     next('/login')
+  //         return { path: `/login?redirect=${to.path}`, query: { ...to.query } }
   //       })
-      next()
-    } else {
-      if (whiteList.indexOf(to.path) !== -1) {
-        next('/login')
-      } else {
-        next('/login?redirect=${to.path}')
-        // return `/login?redirect=${to.path}`
-      }
-    }
-  }
+  //   } else {
+  //     if (whiteList.indexOf(to.path) !== -1) {
+  //       if (to.path.indexOf('delivery-plan-approve') !== -1) {
+  //         return { path: '/month-flow', query: { ...to.query } }
+  //       } else {
+  //         return true
+  //       }
+  //     } else {
+  //       if (to.path.indexOf('delivery-plan-approve') !== -1) {
+  //         return '/month-flow'
+  //       } else {
+  //         return { path: `/login?redirect=${to.path}`, query: { ...to.query } }
+  //       }
+  //     }
+  //   }
+  // }
 })

src/utils/index.js

@@ -24,3 +24,20 @@ export function getQueryObject(url) {
   })
   return obj
 }
+
+// 处理流程提交数据
+export function handleFormData(data) {
+  const formData = new FormData()
+
+  for (const key in data) {
+    if (typeof data[key] === 'object' && data[key] !== null) {
+      formData.append(key, JSON.stringify(data[key]))
+    } else if (data[key] === null) {
+      formData.append(key, '')
+    } else {
+      formData.append(key, data[key])
+    }
+  }
+
+  return formData
+}

src/utils/request.js

@@ -77,10 +77,11 @@ service.interceptors.response.use(
       // 刷新tonken
       return response
     }
-    await store.dispatch('resetToken')
-    router.replace('/login')
+
     if (status === 401) {
       Toast(msg)
+      await store.dispatch('resetToken')
+      router.replace('/login')
       return
     }
     if (status === 2) {

src/views/Login.vue

 <template>
   <div class="wrapper">
-    <h1>登录失败</h1>
+    <h3>登入中...</h3>
   </div>
 </template>
 <script>
 import { login } from '@/api/login'
-import { getQueryObject } from '@/utils/index'
+// import { getQueryObject } from '@/utils/index'
 
 export default {
   data() {
@@ -14,24 +14,43 @@ export default {
     }
   },
   created() {
-    let url =
-      'http://10.0.135.139:8081#/wly/to-goods/base-setting/delivery-plan-approve?taskToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJsb2dpbk5hbWUiOiIxMDAwMjQ5NCIsImV4cCI6NDc3NjgzOTAyOSwidGFza0lkIjoiNmQ2ZWQ5YjktZTdlOS0xMWVjLWE0ZjEtMTBmMDA1YzBmNjMwIn0._83ADC4o-v04sMxIuW1mri7BdrZiM5ey03WEb7gDRe3cx7Lbi1pMOk1WHFFsUMXVxlqSEhjK7ZfP-BKhONXJdg&id=0fb1a6fb6a84b582ec552089df5e794f&taskId=6d6ed9b9-e7e9-11ec-a4f1-10f005c0f630'
-    let res = getQueryObject(url)
-    this.urlObj = res
+    console.log('2222', this.$route, this.$store, this.$store.getters.token)
+    const { query, redirectedFrom } = this.$route
+    this.urlObj = query
+    if (this.$store.getters.token) {
+      if (!redirectedFrom) return this.$router.back()
+      if (redirectedFrom.path.indexOf('delivery-plan-approve') !== -1) {
+        this.$router.push({ name: 'MonthFlow', query: { ...this.urlObj } })
+      }
+    } else {
       this.handleLogin()
+    }
   },
   methods: {
     handleLogin() {
       login({
         taskToken: this.urlObj.taskToken
       }).then(resp => {
-        console.log('handleLogin', resp)
         const { token, operator } = resp.data
         this.$store.commit('SET_USERINFO', operator)
-        this.$store.dispatch('setToken', token).then(() => {})
+        this.$store.dispatch('setToken', token).then(() => {
+          console.log('333', this.$route, this.$store, this.$store.getters.token)
+          const { redirectedFrom } = this.$route
+          if (!redirectedFrom) return this.$router.back()
+          if (redirectedFrom.path.indexOf('delivery-plan-approve') !== -1) {
+            this.$router.push({ name: 'MonthFlow', query: { ...this.urlObj } })
+          }
+        })
       })
     }
   }
 }
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.wrapper {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/month-flow/monthFlow.vue

@@ -5,10 +5,10 @@
     <div class="main">
       <div class="list-wrapper">
         <div class="top-block">
-          <van-cell title="申请时间" value="2022.06.22 17:05:28" />
-          <van-cell title="录入人" value="苏州新川商贸公司" />
-          <van-cell title="计划年度" value="2022" />
-          <van-cell title="备注" value="共15家客户，应市场变化调整发货计划" />
+          <van-cell title="申请时间" :value="conditions.createdDate" />
+          <van-cell title="录入人" :value="conditions.createdByName" />
+          <van-cell title="计划年度" :value="conditions.pyear" />
+          <van-cell title="备注" :value="conditions.remark" />
         </div>
         <van-button class="download-btn" :icon="downloadIcon" type="primary">
           发货计划下载
@@ -21,31 +21,18 @@
               active-color="#FF1D32"
               inactive-color="#999"
             >
-              <van-step>
-                <template #active-icon>
-                  <span class="active-dot">1</span>
-                </template>
-                <template #inactive-icon>
-                  <span class="inactive-dot">1</span>
-                </template>
-                <template #finish-icon>
-                  <span class="active-dot">1</span>
-                </template>
-                <p class="step-title">同意</p>
-                <p class="step-title2">战总 四川战区</p>
-              </van-step>
-              <van-step>
+              <van-step v-for="(item, index) in tablePathData" :key="item.id">
                 <template #active-icon>
-                  <span class="active-dot">2</span>
+                  <span class="active-dot">{{ index + 1 }}</span>
                 </template>
                 <template #inactive-icon>
-                  <span class="inactive-dot">2</span>
+                  <span class="inactive-dot">{{ index + 1 }}</span>
                 </template>
                 <template #finish-icon>
-                  <span class="active-dot">2</span>
+                  <span class="active-dot">{{ index + 1 }}</span>
                 </template>
-                <p class="step-title">同意</p>
-                <p class="step-title2">战总 四川战区</p>
+                <p class="step-title">{{ item.statusName }}</p>
+                <p class="step-title2">{{ item.handler }}</p>
               </van-step>
               <van-step>
                 <template #active-icon>
@@ -63,28 +50,83 @@
         </van-collapse>
         <div class="remark-block">
           <span class="title">意见</span>
-          <textarea class="text" type="textarea" rows="2" />
+          <textarea v-model="conditions.handleOpinion" class="text" type="textarea" rows="2" />
         </div>
       </div>
     </div>
     <p class="bottom-block"></p>
     <div class="bottom">
-      <van-button plain type="primary">驳回</van-button>
-      <van-button plain type="primary">通过</van-button>
+      <van-button plain @click="refuse" type="primary">驳回</van-button>
+      <van-button plain @click="submit" type="primary">通过</van-button>
     </div>
   </div>
 </template>
 <script>
+import { apiMonthplanFindById } from '@/api/applyForGoods'
+import { queryApprovalHistoryByBizId, advance } from '@/api/flowHander'
+import { Toast } from 'vant'
+
 export default {
   data() {
     return {
       activeNames: ['1'],
       downloadIcon: require('@/assets/images/download@3x.png'),
-      urlObj: {}
+      conditions: {
+        id: '',
+        bizId: '',
+        taskId: '',
+        handleOpinion: '',
+        handleResult: '1'
+      },
+      tablePathData: []
+    }
+  },
+  created() {
+    const { id, taskId } = this.$route.query
+    if (id) {
+      this.conditions.id = 'f0a4a35931a696abca201c11bd2b02a3' || id
+      this.conditions.bizId = 'f0a4a35931a696abca201c11bd2b02a3' || id
+      this.conditions.taskId = taskId
+      this.initDetail()
+      this.flowPath()
     }
   },
-  created() {},
   methods: {
+    initDetail() {
+      apiMonthplanFindById(this.conditions).then(res => {
+        console.log(res.data)
+        res.data.pyear += ''
+        this.conditions = { ...this.conditions, ...res.data }
+        this.initCustome()
+      })
+    },
+    flowPath() {
+      queryApprovalHistoryByBizId({ bizId: this.conditions.id })
+        .then(res => {
+          if (res.data) {
+            this.tablePathData = res.data.Rows
+          }
+        })
+        .catch(() => {})
+    },
+    async submit() {
+      this.conditions.handleResult = '1'
+      const params = JSON.parse(JSON.stringify(this.conditions))
+      params.currentHandleId = ''
+      params.currentHandleGroupId = ''
+      params.taskId = this.$route.query.taskId
+      if (this.conditions.id) {
+        const res = await advance(params)
+        if (res.status === 1) {
+          Toast('提交成功')
+        }
+      }
+    },
+    refuse() {
+      this.conditions.handleResult = '2'
+      this.submit()
+    },
+    initCustome() {},
     onClickLeft() {}
   }
 }