系统-基础-统计报表

src/views/wmsSystemSettings/AddForm.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Date: 2021-01-05 13:40:58
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 09:39:54
+ * @FilePath: \basic-admin\src\views\RoleManager\AddForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.role.add' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('roleManage.roleCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('roleManage.roleCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('roleManage.roleName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleType')" prop="category">
+          <el-select v-model="formData.category">
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('roleManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        remark: undefined,
+        category: 1
+      },
+      categoryOptions: [{
+        value: 1,
+        label: 'pc'
+      }, {
+        value: 5,
+        label: 'pda'
+      }],
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleCode')]),
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleName')]),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleType')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.$nextTick(() => {
+        this.$refs['formData'].resetFields()
+      })
+    },
+    onClose() {
+      this.$refs['formData'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['formData'].validate(async valid => {
+        if (!valid) return
+        this.$message({
+          type: 'success',
+          message: '添加成功！'
+        })
+        this.$emit('done')
+        this.close()
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/wmsSystemSettings/EditForm.vue

@@ -0,0 +1,123 @@
+<!--
+ * @Date: 2021-01-05 13:40:58
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:56:44
+ * @FilePath: \basic-admin\src\views\RoleManager\EditForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.role.edit' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="编辑角色" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('roleManage.roleCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('roleManage.roleCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('roleManage.roleName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleType')" prop="category">
+          <el-select v-model="formData.category">
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('roleManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.rolestartstop')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" @change="enableStateChange" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => {
+        return {
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        remark: undefined,
+        category: 1,
+        enabled: true
+      },
+      categoryOptions: [{
+        value: 1,
+        label: 'pc'
+      }, {
+        value: 5,
+        label: 'pda'
+      }],
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleCode')]),
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleName')]),
+          trigger: 'blur'
+        }],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$emit('done')
+      this.$refs['编辑角色'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    async enableStateChange(val) {
+      console.log(val)
+    },
+    handelConfirm() {
+      this.$refs['编辑角色'].validate(async valid => {
+        if (!valid) return
+        this.$message({
+          type: 'success',
+          message: '修改成功！'
+        })
+        this.close()
+      })
+    },
+    async getInfo() {
+      console.log(this.targetInfo)
+      this.formData = this.targetInfo
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/wmsSystemSettings/menuEmpower.vue

@@ -0,0 +1,89 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 09:44:53
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :visible.sync="visible"
+  >
+    <el-card class="box-card">
+      <div slot="header" style="font-size:20px;text-align:center">
+        <span style="">{{ $t('roleManage.roleEmPower') }}</span>
+      </div>
+      <div style="max-height:500px;overflow:auto">
+        <el-tree
+          ref="menuListTree"
+          :data="menuList"
+          :props="{
+            label: language === 'en' ? 'enName' : 'name',
+            children: 'children'
+          }"
+          node-key="id"
+          show-checkbox
+          check-on-click-node
+          :default-expand-all="true"
+          :highlight-current="true"
+          :expand-on-click-node="false"
+        />
+      </div>
+    </el-card>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="RoleMenu()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      visible: false,
+      dataList: [],
+      menuList: [],
+      id: '',
+      listQuery: {
+        current: 1,
+        size: 550
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['language'])
+  },
+  methods: {
+    async init(id) {
+      this.id = id || ''
+      this.visible = true
+      this.dataList.splice(0, this.dataList.length)
+    },
+    setCheckedNodes(menuId) {
+      this.$refs.menuListTree.setCheckedKeys(menuId)
+    },
+    RoleMenu() {
+      this.$message({
+        message: this.$t('module.basicData.visual.success'),
+        type: 'success',
+        duration: 1500,
+        onClose: () => {
+          this.visible = false
+          this.$emit('done')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-tree >>> .el-tree-node__label {
+    font-size: 20px;
+  }
+  .el-tree >>> .el-tree-node__expand-icon {
+    font-size: 20px;
+  }
+</style>

src/views/wmsSystemSettings/roleManagement.vue

@@ -1,8 +1,187 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:57:32
+ * @FilePath: \mt-bus-fe\src\views\RoleManager\index.vue
+ * @Description:
+-->
 <template>
-  <div>1</div>
+  <div class="app-container">
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="curEditId" @done="getList" />
+    <menu-empower ref="empowerRef" :visible.sync="empowerDialog" @done="getList" />
+  </div>
 </template>
+
 <script>
+import basicData from '@/filters/basicData'
+import HeadForm from '@/components/basicData/HeadForm'
+import i18n from '@/lang'
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'EmPower',
+  btnName: i18n.t('roleManage.roleEmPower')
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}
+]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('roleManage.roleCode'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('roleManage.roleName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('roleManage.status'),
+  align: 'center',
+  filter: basicData('enableState')
+},
+// {
+//   prop: 'category',
+//   label: i18n.t('roleManage.roleType'),
+//   align: 'center',
+//   filter: basicData('roleType')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('roleManage.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import menuEmpower from './menuEmpower'
+import BaseTable from '@/components/BaseTable'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
 export default {
-  name: 'RoleManagement'
+  name: 'RoleManagement',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm, HeadForm, menuEmpower },
+  props: {},
+  data() {
+    return {
+      topBtnConfig,
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      trueWidth: 120,
+      listLoading: false,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      empowerDialog: false,
+      listQuery: {
+        current: 1,
+        size: 20
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: this.$t('roleManage.roleName'),
+          param: 'keyName'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data
+          break
+        case 'EmPower':
+          this.empowerRole(raw.data.id)
+          break
+      }
+    },
+    async getList() {
+      this.list = [
+        {
+          id: 1,
+          name: '管理员',
+          code: 'R254815254',
+          enabled: 1
+        }
+      ]
+    },
+    // 新增 / 修改
+    addNew() {
+      this.showDialog = true
+    },
+    empowerRole(id) {
+      this.empowerDialog = true
+      this.$nextTick(() => {
+        this.$refs.empowerRef.init(id)
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()// 新增
+      }
+    }
+  }
 }
 </script>