ソースを参照

新增发券权限

zhangdan 4 年 前
コミット
c6c2c7aeb5

+ 58 - 0
src/api/car-send-role.js

@@ -0,0 +1,58 @@
+import { axios } from '@/utils/request'
+
+// 获取角色列表数据
+export const getRoleList = params => {
+  const url = `mdrole/queryLike/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+
+// 启用禁用角色   flag 0:禁用 1:启用
+export const changeRoleStatus = params => {
+  return axios({
+    url: `mdrole/enable/${params.id}/${params.flag}`,
+    params: params,
+    method: 'get'
+  })
+}
+
+// 查询发券可用所有菜单
+export const getAllUsedMenu = params => {
+  return axios({
+    url: `mdrole/findAllMenu/${params.id}`,
+    data: {},
+    method: 'get'
+  })
+}
+
+// 保存新修改的可用菜单
+export const getAllNewMenu = params => {
+  return axios({
+    url: `mdrole/saveRoleMenu`,
+    data: params,
+    method: 'post'
+  })
+}
+
+// 新增-编辑角色
+export const getEnableRole = params => {
+  return axios({
+    url: 'mdrole/save',
+    data: params,
+    method: 'post'
+  })
+}
+
+// 删除角色
+export const getDelRole = params => {
+  return axios({
+    url: `mdrole/delete/${params.id}`,
+    data: params,
+    method: 'get'
+  })
+}

+ 58 - 0
src/api/car-send-user.js

@@ -0,0 +1,58 @@
+import { axios } from '@/utils/request'
+
+// 重置密码
+export const resetPSD = params => {
+  return axios({
+    url: 'employee/restPWD',
+    data: params,
+    method: 'POST'
+  })
+}
+
+// 获取列表数据
+export const getUserList = params => {
+  const url = `employee/queryLike/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+
+// 设置为负责人
+export const setManager = params => {
+  return axios({
+    url: `employee/setManager`,
+    data: params,
+    method: 'post'
+  })
+}
+
+// 删除用户接口
+export const delectUser = params => {
+  return axios({
+    url: `employee/del/${params.id}`,
+    data: {},
+    method: 'get'
+  })
+}
+
+// 新增/编辑保存接口
+export const saveUser = params => {
+  return axios({
+    url: 'employee/save',
+    data: params,
+    method: 'POST'
+  })
+}
+
+// 获取角色列表数据
+export const getRoleList = params => {
+  return axios.request({
+    url: '/mdrole/findAll',
+    data: params,
+    method: 'POST'
+  })
+}

+ 194 - 0
src/views/CardSendAuth/role/menuModal.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <a-modal class="modalBox" :title="roleName" v-model="isshow" @cancle="cancel">
+      <a-form class="form-box" style="max-height: 600px;" :form="form" @submit="handleSubmit">
+
+        <a-tree
+          checkable
+          @check="onCheck"
+          @expand="onExpand"
+          :expandedKeys="expandedKeys"
+          :autoExpandParent="autoExpandParent"
+          v-model="checkedKeys"
+          :treeData="treeData"
+        />
+
+      </a-form>
+      <a-form-item :wrapper-col="{ offset: 15 }">
+        <a-button type="primary" @click="handleSubmit()">
+          保存
+        </a-button>
+        <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
+          取消
+        </a-button>
+      </a-form-item>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import { getAllNewMenu } from '@/api/car-send-role.js'
+export default {
+  name: 'RoleModal',
+  components: {
+    STable, VSelect
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      treeData: [],
+      roleName: '',
+      expandedKeys: [],
+      autoExpandParent: true,
+      checkedKeys: [],
+      checkedData: [],
+      isshow: this.visible,
+      formLayout: 'horizontal',
+      form: this.$form.createForm(this, { name: 'menuModal' }),
+      id: '' // 角色id
+    }
+  },
+  methods: {
+    onExpand (expandedKeys) {
+      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+      // or, you can remove all expanded children keys.
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    onCheck (checkedKeys, info) {
+      this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
+      this.checkedKeys = checkedKeys
+    },
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
+    // 保存提交
+    handleSubmit () {
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (this.checkedData.length == 0) {
+            return this.$message.warning('请先选择菜单')
+          }
+          const arr = this.checkedData.join(',')
+          getAllNewMenu({ id: this.id, menuIds: arr }).then(res => {
+            if (res.status + '' === '200') {
+              this.$message.success(res.message ? res.message : '保存成功')
+              this.$emit('refresh')
+              setTimeout(function () {
+                _this.cancel()
+              }, 300)
+            } else {
+              // this.$message.error(res.message)
+            }
+          })
+        }
+      })
+    },
+    // 取消
+    handleCancel () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定取消吗?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          _this.clear()
+          _this.cancel()
+        }
+      })
+    },
+    clear () {
+      this.form.resetFields()
+      this.roleName = ''
+      this.id = ''
+      this.checkedKeys = []
+    },
+    findLeaf (data, arr) {
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i]
+        if (node.children) {
+          this.findLeaf(node.children, arr)
+        } else {
+          const hasNode = arr.find(item => {
+            return item == node.id
+          })
+          if (hasNode) {
+            this.checkedKeys.push(node.id)
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this, { name: 'menuModal' })
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (newValue) {
+        if (this.data) { // 编辑
+          this.treeData = this.data.allMenuList
+          this.id = this.data.role.id
+          this.roleName = '分配权限' + '(' + this.data.role.name + ')'
+          if (this.data.role.menuIds) {
+            const arr = this.data.role.menuIds.split(',')
+            const temp = []
+            arr.map(item => {
+              temp.push(Number(item))
+            })
+            this.checkedData = temp
+            this.expandedKeys = temp
+            // 找出叶子节点
+            this.findLeaf(this.treeData, temp)
+          }
+        }
+      } else {
+        this.cancel()
+      }
+    }
+  }
+}
+</script>
+
+<style >
+  .modalBox{
+  }
+  .ant-modal-footer {
+    display: none;
+  }
+  .form-box {
+    max-height: 600px !important;
+    overflow: auto;
+  }
+  .form-box::-webkit-scrollbar{
+    width: 6px;
+    height: 6px ;
+  }
+
+  .form-box::-webkit-scrollbar-thumb{
+    width: 6px;
+    height: 6px ;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 0 2px #d1d1d1;
+    background: #e4e4e4;
+  }
+</style>

+ 222 - 0
src/views/CardSendAuth/role/roleList.vue

@@ -0,0 +1,222 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="角色名称">
+              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入角色名称"/>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="24">
+            <a-form-item label="状态">
+              <v-select code="CHECK_ENABLE_STATE" v-model="queryParam.isEnable" allowClear placeholder="请选择状态" ></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="4" :sm="24">
+            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-divider/>
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="openModal">新建</a-button>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="id"
+      :columns="columns"
+      :data="loadData"
+      bordered
+    >
+      <span slot="status" slot-scope="text, record">
+        <a-switch checkedChildren="" unCheckedChildren="" v-model="record.isEnable" @change="changeFlagHandle(text, record)"/>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a class="action-button menu-text" @click="openMenuModal(record)">菜单权限</a>
+          <a class="action-button" @click="handleEdit(record)">修改</a>
+          <a v-if="!record.isEnable" class="action-button red-text" @click="delect(record)">删除</a>
+        </template>
+      </span>
+    </s-table>
+    <roleModal :visible="showModal" :data="itemData" @refresh="refreshTable" @close="showModal = false"></roleModal>
+    <menuModal :visible="showMenuModal" :data="menuData" @close="showMenuModal = false"></menuModal>
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import roleModal from './roleModal.vue'
+import menuModal from './menuModal.vue'
+import { getRoleList, changeRoleStatus, getAllUsedMenu, getDelRole } from '@/api/car-send-role.js'
+export default {
+  name: 'RoleList',
+  components: {
+    STable, VSelect, roleModal, menuModal
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: {
+        name: '',
+        isEnable: ''
+      },
+      showModal: false,
+      showMenuModal: false,
+      itemData: {}, // 编辑行数据
+      menuData: {},
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'no',
+          width: '40',
+          align: 'center'
+        },
+        {
+          title: '角色名称',
+          dataIndex: 'name',
+          width: '100',
+          align: 'center'
+        },
+        {
+          title: '角色描述',
+          dataIndex: 'remarks',
+          width: '100',
+          align: 'center'
+        },
+        {
+          title: '状态',
+          width: '100',
+          align: 'center',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createDate',
+          width: '120',
+          align: 'center'
+        },
+        {
+          title: '操作',
+          width: '100',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getRoleList(Object.assign(parameter, this.queryParam)).then(res => {
+          const no = (res.data.pageNo - 1) * res.data.pageSize
+          for (let i = 0; i < res.data.list.length; i++) {
+            const _item = res.data.list[i]
+            _item.no = no + i + 1
+            _item.isEnable = _item.isEnable + '' === '1'
+          }
+          return res.data
+        })
+      },
+      optionAlertShow: false
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // vm.$refs.table.refresh()
+    })
+  },
+  methods: {
+    // 刷新列表
+    refreshTable () {
+      this.$refs.table.refresh(true)
+    },
+    // 新建
+    openModal () {
+      this.showModal = true
+      this.itemData = {}
+    },
+    // 打开分配权限弹窗
+    openMenuModal (row) {
+      this.getAllUsedMenu(row.id)
+    },
+    // 获取菜单树列表
+    getAllUsedMenu (id) {
+      const _this = this
+      getAllUsedMenu({ id: id }).then(res => {
+        if (res.status == 200) {
+          _this.menuData = res.data
+          this.showMenuModal = true
+        }
+      })
+    },
+
+    // 删除
+    delect (row) {
+      const _this = this
+      this.$confirm({
+        title: '警告',
+        content: '删除后无法恢复,确认删除?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          getDelRole({
+            id: row.id
+          }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success('删除成功')
+              _this.$refs.table.refresh()
+            } else {
+              this.$message.error(res.message)
+            }
+          }).catch(() => {
+            _this.$message.success('删除失败, 请稍后重试')
+          })
+        }
+      })
+    },
+    handleEdit (row) {
+      this.showModal = true
+      this.itemData = row
+    },
+    // 修改状态
+    changeFlagHandle (text, record) {
+      const _data = {
+        id: record.id,
+        flag: record.isEnable ? '1' : '0'
+      }
+      changeRoleStatus(_data).then(res => {
+        if (res.status + '' === '200') {
+          this.$message.success('修改成功')
+        } else {
+          record.isEnable = !record.isEnable
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+  .table-page-search-wrapper .ant-form-inline .ant-form-item{
+    margin-bottom: 0;
+  }
+  .action-button{
+    line-height: 40px;
+    white-space: nowrap;
+    padding: 5px 10px;
+    background-color: #1890ff;
+    border-radius: 4px;
+    color: #fff;
+    margin-right: 5px;
+  }
+  .red-text{
+    background-color: red;
+  }
+  .menu-text {
+    background-color: #f90;
+  }
+</style>

+ 172 - 0
src/views/CardSendAuth/role/roleModal.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
+      <a-form :form="form" @submit="handleSubmit">
+        <!-- 用户名称 -->
+        <a-form-item label="角色名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
+          <a-input
+            placeholder="请输入角色名称"
+            v-decorator="['formData.name', {
+              initialValue: formData.name,
+              rules: [{ required: true, message: '请输入角色名称!' },{pattern:'^[^<|>]{1,20}$',message:'请输入不含<或>的字符,最多20个字符'}] }]"
+          />
+        </a-form-item>
+
+        <!-- 状态 -->
+        <a-form-item label="状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
+          <a-radio-group
+            name="radioGroup"
+            v-decorator="[
+              'formData.isEnable',
+              {
+                initialValue: formData.isEnable,
+                rules: [{ required: true, message: '请选择状态!' }] },
+            ]"
+          >
+            <a-radio :value="1">启用</a-radio>
+            <a-radio :value="0">禁用</a-radio>
+          </a-radio-group>
+        </a-form-item>
+
+        <a-form-item label="角色描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
+          <a-textarea
+            v-decorator="[
+              'formData.remarks',
+              { initialValue: formData.remarks,
+                rules: [] },
+            ]"
+            style="min-height: 60px;"
+            placeholder=""
+            autosize />
+        </a-form-item>
+
+        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+          <a-button type="primary" @click="handleSubmit()">
+            保存
+          </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
+            取消
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import { getEnableRole } from '@/api/car-send-role.js'
+export default {
+  name: 'RoleModal',
+  components: {
+    STable, VSelect
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      titleText: '添加角色',
+      isshow: this.visible,
+      formLayout: 'horizontal',
+      form: this.$form.createForm(this, { name: 'roleModal' }),
+      formData: {
+        name: '',
+        isEnable: '', // 活动状态
+        remarks: ''
+      }
+
+    }
+  },
+  methods: {
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
+
+    // 保存提交
+    handleSubmit () {
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          getEnableRole(Object.assign(this.formData, values.formData)).then(res => {
+            if (res.status + '' === '200') {
+              this.$message.success(res.message ? res.message : '保存成功')
+              this.$emit('refresh')
+              setTimeout(function () {
+                _this.cancel()
+              }, 300)
+            } else {
+              // this.$message.error(res.message)
+            }
+          })
+        }
+      })
+    },
+    // 取消
+    handleCancel () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定取消吗?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          _this.clear()
+          _this.cancel()
+        }
+      })
+    },
+    clear () {
+      this.form.resetFields()
+      delete this.formData.id
+      this.formData.name = ''
+      this.formData.isEnable = ''
+      this.formData.remarks = ''
+    }
+
+  },
+  mounted () {
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this, { name: 'roleModal' })
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (newValue) {
+        if (this.data.id) { // 编辑
+          this.titleText = '编辑角色'
+          this.formData = Object.assign({}, this.data)
+          delete this.formData.no
+          this.formData.isEnable = Number(this.formData.isEnable)
+        } else {
+          this.titleText = '添加角色'
+        }
+      } else {
+        this.cancel()
+      }
+    }
+  }
+}
+</script>
+
+<style >
+  .modalBox{
+  }
+  .ant-modal-footer {
+    display: none;
+  }
+</style>

+ 244 - 0
src/views/CardSendAuth/user/userList.vue

@@ -0,0 +1,244 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="用户名称">
+              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入用户名称"/>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="24">
+            <a-form-item label="手机号码">
+              <a-input allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码"/>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="24">
+            <a-form-item label="状态">
+              <v-select code="CHECK_ENABLE_STATE" v-model="queryParam.loginFlag" allowClear placeholder="请选择状态"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="4" :sm="24">
+            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-divider/>
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="openModal">新建</a-button>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="id"
+      :columns="columns"
+      :data="loadData"
+      bordered
+    >
+      <span slot="status" slot-scope="text, record">
+        <a-switch checkedChildren="" unCheckedChildren="" v-model="record.loginFlag" @change="changeFlagHandle(text, record)"/>
+      </span>
+      <div slot="roleNames" slot-scope="text, record" :title="record.roleNames">
+        <span v-if="record.roleNames">{{ record.roleNames.substr(0,12) + '...' }}</span>
+        <span v-else>无</span>
+      </div>
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <div >
+            <a class="action-button" @click="handleEdit(record)">修改</a>
+            <a v-if="record.loginFlag" class="action-button reset-text" @click="resetPassword(record)">重置密码</a>
+            <a v-if="!record.loginFlag" class="action-button red-text" @click="delect(record)">删除</a>
+          </div>
+        </template>
+      </span>
+    </s-table>
+    <userModal :visible="showModal" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></userModal>
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import userModal from './userModal.vue'
+import { resetPSD, getUserList, delectUser } from '@/api/car-send-user.js'
+export default {
+  name: 'UserList',
+  components: {
+    STable, VSelect, userModal
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: {
+        name: '',
+        phone: '',
+        loginFlag: ''
+      },
+      showModal: false,
+      itemData: {}, // 编辑行数据
+      pageNo: '1',
+      pageSize: '10',
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'no',
+          width: '40',
+          align: 'center'
+        },
+        {
+          title: '用户名称',
+          dataIndex: 'name',
+          width: '100',
+          align: 'center'
+        },
+        {
+          title: '手机号码',
+          dataIndex: 'phone',
+          width: '100',
+          align: 'center'
+        },
+        {
+          title: '角色',
+          width: '100',
+          align: 'center',
+          scopedSlots: { customRender: 'roleNames' }
+        },
+        {
+          title: '状态',
+          width: '100',
+          align: 'center',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createDate',
+          width: '120',
+          align: 'center'
+        },
+        {
+          title: '操作',
+          width: '100',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getUserList(Object.assign(parameter, this.queryParam)).then(res => {
+          const no = (res.data.pageNo - 1) * res.data.pageSize
+          for (let i = 0; i < res.data.list.length; i++) {
+            const _item = res.data.list[i]
+            _item.no = no + i + 1
+            // _item.loginFlag = _item.loginFlag + '' === '1'
+          }
+          return res.data
+        })
+      },
+      optionAlertShow: false
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // vm.$refs.table.refresh()
+    })
+  },
+  methods: {
+    // 刷新列表
+    refreshTable () {
+      this.$refs.table.refresh(true)
+    },
+    // 新建
+    openModal () {
+      this.showModal = true
+      this.itemData = {}
+    },
+    // 重置密码
+    resetPassword (row) {
+      resetPSD({
+        id: row.id
+      }).then(res => {
+        if (res.status == 200) {
+          this.$message.success('密码重置成功')
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch(() => {
+        this.$message.success('密码重置失败, 请稍后重试')
+      })
+    },
+    // 删除
+    delect (row) {
+      const _this = this
+      this.$confirm({
+        title: '警告',
+        content: '删除后无法恢复,确认删除?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          delectUser({
+            id: row.id
+          }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success('删除成功')
+              _this.$refs.table.refresh()
+            } else {
+              _this.$message.error(res.message)
+            }
+          }).catch(() => {
+            _this.$message.success('删除失败, 请稍后重试')
+          })
+        }
+      })
+    },
+    getBizStr (storeBizList) {
+      const str = []
+      storeBizList.forEach(item => {
+        str.push(item.bizTypeName)
+      })
+      return str.join(',')
+    },
+    handleEdit (row) {
+      this.showModal = true
+      this.itemData = row
+    }
+    // 修改状态
+    // changeFlagHandle (text, record) {
+    //   const _data = {
+    //     id: record.id,
+    //     flag: record.loginFlag ? '1' : '0'
+    //   }
+    //   updateEnableStatus(_data).then(res => {
+    //     if (res.status + '' === '200') {
+    //       this.$message.success('修改成功')
+    //     } else {
+    //       record.loginFlag = !record.loginFlag
+    //     }
+    //   })
+    // }
+  }
+}
+</script>
+<style scoped>
+  .table-page-search-wrapper .ant-form-inline .ant-form-item{
+    margin-bottom: 0;
+  }
+  .action-button{
+   line-height: 40px;
+   white-space: nowrap;
+    padding: 5px 10px;
+    background-color: #1890ff;
+    border-radius: 4px;
+    color: #fff;
+    margin-right: 5px;
+  }
+  .red-text{
+    background-color: red;
+  }
+  .reset-text {
+    background-color: #31b50b;
+  }
+</style>

+ 268 - 0
src/views/CardSendAuth/user/userModal.vue

@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
+      <a-form :form="form" @submit="handleSubmit">
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <!-- 用户名称 -->
+            <a-form-item label="用户名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+              <a-input
+                placeholder="请输入用户名称"
+                v-decorator="['formData.name', {
+                  initialValue: formData.name,
+                  rules: [{ required: true, message: '请输入用户名称!' },{pattern:'^[^<|>]{1,20}$',message:'请输入不含<或>的字符,最多20个字符'}] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <!-- 手机号码 -->
+            <a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+              <a-input
+                placeholder="请输入手机号码"
+                v-decorator="['formData.phone', {
+                  initialValue: formData.phone,
+                  rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <!-- 性别 -->
+          <a-col :span="12">
+            <a-form-item label="性别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+              <v-select
+                code="SEX"
+                v-decorator="[
+                  'formData.sex',
+                  {
+                    initialValue: formData.sex,
+                    rules: [{ required: true, message: '请选择性别!' }] },
+                ]"
+                allowClear ></v-select>
+
+            </a-form-item>
+          </a-col>
+          <!-- 状态 -->
+          <a-col :span="12">
+            <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+              <a-radio-group
+                name="radioGroup"
+                v-decorator="[
+                  'formData.loginFlag',
+                  {
+                    initialValue: formData.loginFlag,
+                    rules: [{ required: true, message: '请选择状态!' }] },
+                ]"
+              >
+                <a-radio :value="1">是</a-radio>
+                <a-radio :value="0">否</a-radio>
+              </a-radio-group>
+
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+              <a-select
+                v-decorator="[
+                  'formData.roleNames',
+                  {
+                    initialValue: formData.roleNames,
+                    rules: [{ required: true, message: '请选择状态!' }] },
+                ]"
+                mode="multiple"
+                style="width: 100%"
+                placeholder="请选择角色"
+              >
+                <a-select-option
+                  v-for="item in roleList"
+                  :key="item.id"
+                  :disabled="item.isEnable == '0' ? true : false"
+                >{{ item.name }}</a-select-option
+                >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+              <a-textarea
+                v-decorator="[
+                  'formData.remarks',
+                  {
+                    initialValue: formData.remarks,
+                    rules: [] },
+                ]"
+                style="min-height: 50px;"
+                placeholder=""
+                autosize />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+          <a-button type="primary" @click="handleSubmit()">
+            保存
+          </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
+            取消
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import { getRoleList, saveUser } from '@/api/car-send-user.js'
+export default {
+  name: 'UserModal',
+  components: {
+    STable, VSelect
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      titleText: '添加用户',
+      isshow: this.visible,
+      formLayout: 'horizontal',
+      form: this.$form.createForm(this, { name: 'miniForm' }),
+      roleList: [],
+      formData: {
+        roleNames: undefined, // 角色
+        name: '',
+        loginFlag: '', // 活动状态
+        phone: '',
+        sex: '',
+        remarks: ''
+      }
+    }
+  },
+  methods: {
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
+
+    // 保存提交
+    handleSubmit () {
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          values.formData.roleNames = values.formData.roleNames.join(',')
+          saveUser(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
+            if (res.status + '' === '200') {
+              this.$message.success(res.message ? res.message : '保存成功')
+              this.$emit('refresh')
+              setTimeout(function () {
+                _this.cancel()
+              }, 300)
+            } else {
+              // this.$message.error(res.message)
+            }
+          })
+        }
+      })
+    },
+    // 取消
+    handleCancel () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定取消吗?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          _this.clear()
+          _this.cancel()
+        }
+      })
+    },
+    clear () {
+      this.form.resetFields()
+      delete this.formData.id
+      this.formData.roleNames = []
+      this.formData.name = ''
+      this.formData.loginFlag = ''
+      this.formData.phone = ''
+      this.formData.sex = ''
+      this.formData.remarks = ''
+    },
+
+    // 获取角色列表接口
+    getRoleList () {
+      getRoleList().then(res => {
+        if (res.status + '' === '200') {
+          this.roleList = res.data
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    }
+
+  },
+  mounted () {
+    this.getRoleList()
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this, { name: 'miniForm' })
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (newValue) {
+        if (this.data.id) { // 编辑
+          this.titleText = '编辑用户'
+          this.formData = Object.assign({}, this.data)
+          delete this.formData.no
+          let roleNames = this.formData.roleNames
+          if (roleNames) {
+            roleNames = roleNames.split(',')
+            const arr = []
+            roleNames.map(item => {
+              const row = this.roleList.find(a => {
+                return a.name == item
+              })
+              if (row) {
+                arr.push(row.id)
+              }
+            })
+            this.formData.roleNames = arr
+          } else {
+            this.formData.roleNames = []
+          }
+
+          this.formData.loginFlag = Number(this.formData.loginFlag)
+        } else {
+          this.titleText = '添加用户'
+        }
+      } else {
+        this.cancel()
+      }
+    }
+  }
+}
+</script>
+
+<style >
+  .modalBox{
+  }
+  .ant-modal-footer {
+    display: none;
+  }
+</style>