财务-收款权限

src/api/caimei/finance.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function fetchList() {
+  return request({
+    url: '/finance/receipt/users',
+    method: 'get'
+  })
+}
+
+export function getUser(id) {
+  return request({
+    url: '/finance/receipt/user/' + id,
+    method: 'get'
+  })
+}
+
+export function updateUser(id, data) {
+  return request({
+    url: '/finance/receipt/user/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+export function createUser(data) {
+  return request({
+    url: '/finance/receipt/user/create',
+    method: 'post',
+    data: data
+  })
+}
+
+export function deleteUser(id) {
+  return request({
+    url: '/finance/receipt/user/delete/' + id,
+    method: 'post'
+  })
+}
+
+export function fetchPermissionList() {
+  return request({
+    url: '/finance/receipt/permissions',
+    method: 'get'
+  })
+}

src/router/index.js

@@ -11,6 +11,7 @@ import sysRouter from './modules/sys'
 import wechatRouter from './modules/wechat'
 import webPageRouter from './modules/webPage'
 import productRouter from './modules/product'
+import financeRouter from './modules/finance'
 // import tableRouter from './modules/table'
 // import nestedRouter from './modules/nested'
 
@@ -94,6 +95,7 @@ export const asyncRoutes = [
   sysRouter,
   webPageRouter,
   productRouter,
+  financeRouter,
   wechatRouter
   /** when your routing map is too long, you can split it into small modules **/
   // componentsRouter,

src/router/modules/finance.js

@@ -0,0 +1,43 @@
+import Layout from '@/layout'
+
+const financeRouter = {
+  path: '/finance',
+  component: Layout,
+  redirect: '/finance/receipt',
+  alwaysShow: true, // will always show the root menu
+  name: 'FinanceSetting', // name必须和后台配置一致，不然匹配不到
+  meta: { title: '财务设置', icon: 'component' },
+  children: [
+    {
+      path: 'receipt',
+      component: () => import('@/views/finance/index'),
+      redirect: '/finance/receipt/users',
+      name: 'ReceiptUserManage',
+      meta: { title: '收款人权限', icon: 'documentation' },
+      children: [
+        {
+          path: 'users',
+          hidden: true,
+          component: () => import('@/views/finance/receipt/users.vue'),
+          name: 'ReceiptUserList',
+          meta: { title: '收款人列表' }
+        },
+        {
+          path: 'user/edit',
+          hidden: true,
+          component: () => import('@/views/finance/receipt/user.vue'),
+          name: 'ReceiptUserEdit',
+          meta: { title: '编辑收款人', noCache: true }
+        },
+        {
+          path: 'user/add',
+          hidden: true,
+          component: () => import('@/views/finance/receipt/user.vue'),
+          name: 'ReceiptUserEdit',
+          meta: { title: '添加收款人', noCache: true }
+        }
+      ]
+    }
+  ]
+}
+export default financeRouter

src/views/finance/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/views/finance/receipt/user.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="app-container">
+    <el-page-header :content="isEdit?'编辑收款用户':'添加收款用户'" @back="goBack" />
+    <el-card class="form-container" shadow="never">
+      <el-form ref="receiptUserFrom" :model="receiptUser" label-width="150px">
+        <el-form-item label="收款用户名称：" prop="name">
+          <el-input v-model="receiptUser.name" maxlength="100" />
+        </el-form-item>
+        <el-form-item label="收款用户手机号：" prop="mobile">
+          <el-input v-model="receiptUser.mobile" maxlength="100" />
+        </el-form-item>
+        <el-form-item v-if="passwordFlag" key="password" label="收款用户密码：" prop="password">
+          <el-input v-model="receiptUser.password" maxlength="100" />
+        </el-form-item>
+        <el-form-item v-if="!passwordFlag" key="passwordFlag" label="收款用户密码：" prop="password">
+          <el-button @click="passwordFlag=true">重置密码</el-button>
+        </el-form-item>
+        <el-form-item label="收款用户类型：" prop="userType">
+          <el-radio-group v-model="receiptUser.userType">
+            <el-radio :label="1">协销</el-radio>
+            <el-radio :label="2">客服</el-radio>
+            <el-radio :label="3">财务</el-radio>
+            <el-radio :label="4">超级管理员</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="收款用户授权：" prop="permissionIds">
+          <el-checkbox-group v-model="permissionChecked" @change="handleCheckedPermission">
+            <el-checkbox v-for="item in permissionSelect" :key="item.id" :label="item.id" class="littleMarginLeft">{{ item.permission }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('receiptUserFrom')">提交</el-button>
+          <el-button v-if="!isEdit" type="info" @click="resetForm('receiptUserFrom')">重置</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getUser, updateUser, createUser, fetchPermissionList } from '@/api/caimei/finance'
+
+const defaultUser = {
+  id: '',
+  name: '',
+  mobile: '',
+  password: '',
+  userType: '',
+  permissionIds: ''
+}
+export default {
+  name: 'ReceiptUserEdit',
+  data() {
+    return {
+      receiptUser: Object.assign({}, defaultUser),
+      isEdit: false,
+      passwordFlag: true,
+      permissionSelect: [],
+      permissionChecked: []
+    }
+  },
+  watch: {
+    $route(route) {
+      this.getFormData()
+      this.getPermissionList()
+    }
+  },
+  created() {
+    this.getFormData()
+    this.getPermissionList()
+  },
+  methods: {
+    goBack() {
+      // 调用全局挂载的方法,关闭当前标签页
+      this.$store.dispatch('tagsView/delView', this.$route)
+      // 返回上一步路由，返回上一个标签页
+      this.$router.go(-1)
+    },
+    getFormData() {
+      if (this.$route.query.id) {
+        this.receiptUser.id = this.$route.query.id
+        this.isEdit = true
+        this.passwordFlag = false
+        getUser(this.receiptUser.id).then(response => {
+          this.receiptUser.name = response.data.name
+          this.receiptUser.mobile = response.data.mobile
+          this.receiptUser.password = response.data.password
+          this.receiptUser.userType = response.data.userType
+          this.receiptUser.permissionIds = response.data.permissionIds
+          if (response.data.permissionIds) {
+            this.permissionChecked = []
+            response.data.permissionIds.split(',').forEach(element => {
+              this.permissionChecked.push(element * 1)
+              console.log(this.permissionChecked)
+            })
+          }
+        })
+      } else {
+        this.receiptUser.id = ''
+        this.isEdit = false
+        this.passwordFlag = true
+        this.receiptUser = Object.assign({}, defaultUser)
+      }
+    },
+    getPermissionList() {
+      fetchPermissionList().then(response => {
+        this.permissionSelect = response.data
+      })
+    },
+    handleCheckedPermission() {
+      this.receiptUser.permissionIds = this.permissionChecked.join(',')
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.receiptUser = Object.assign({}, defaultUser)
+      this.getFormData()
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            const self = this
+            if (this.isEdit) {
+              updateUser(this.$route.query.id, this.receiptUser).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                self.goBack()
+              })
+            } else {
+              createUser(this.receiptUser).then(response => {
+                this.$refs[formName].resetFields()
+                this.resetForm(formName)
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                self.goBack()
+              })
+            }
+          })
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/finance/receipt/users.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        添加收款用户
+      </el-button>
+    </div>
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
+      <el-table-column label="序号" align="center" width="30">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column label="姓名" align="center">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="手机号" align="center">
+        <template slot-scope="scope">{{ scope.row.mobile }}</template>
+      </el-table-column>
+      <el-table-column label="用户类型" align="center">
+        <template slot-scope="scope">{{ scope.row.userTypeText }}</template>
+      </el-table-column>
+      <el-table-column label="微信openid" align="center">
+        <template slot-scope="scope">{{ scope.row.openid }}</template>
+      </el-table-column>
+      <el-table-column label="用户权限" align="center" min-width="180">
+        <template slot-scope="scope">
+          <el-tag v-for="item in scope.row.permissions" :key="item.id" v-text="item.permission" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { fetchList, deleteUser } from '@/api/caimei/finance'
+
+export default {
+  name: 'ReceiptUserList',
+  data() {
+    return {
+      tableKey: 0,
+      list: [],
+      listLoading: true
+    }
+  },
+  watch: {
+    $route(route) {
+      this.getList()
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList().then(response => {
+        this.listLoading = false
+        this.list = response.data
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    handleCreate() {
+      this.$router.push({ path: '/finance/receipt/user/add' })
+    },
+    handleUpdate(row) {
+      this.$router.push({ path: '/finance/receipt/user/edit', query: { id: row.id }})
+    },
+    handleDelete(row) {
+      this.$confirm('是否要删除该收款用户', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteUser(row.id).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000
+          })
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/sys/users/form.vue

@@ -177,11 +177,7 @@ export default {
       this.$refs[formName].resetFields()
       this.sysUser = Object.assign({}, defaultSysUser)
       this.getSelectsysUserList()
-      this.filterProductAttrList = [
-        {
-          value: []
-        }
-      ]
+      this.getFormData()
     },
     goBack() {
       // 调用全局挂载的方法,关闭当前标签页