工厂模型

package.json

@@ -25,6 +25,7 @@
     "echarts": "^5.3.3",
     "echarts-wordcloud": "^2.0.0",
     "ele-admin": "^1.11.2",
+    "element-china-area-data": "^6.0.2",
     "element-ui": "2.15.7",
     "github-markdown-css": "^5.1.0",
     "jsbarcode": "^3.11.5",
@@ -34,12 +35,12 @@
     "vue": "^2.7.10",
     "vue-clipboard2": "^0.3.3",
     "vue-countup-v2": "^4.0.0",
-    "vuex-persistedstate": "^4.1.0",
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^8.27.2",
     "vue-router": "^3.6.4",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
+    "vuex-persistedstate": "^4.1.0",
     "xgplayer-vue": "^1.1.5",
     "xlsx": "^0.18.5"
   },

src/api/system/role/index.js

@@ -4,17 +4,21 @@ import request from '@/utils/request';
  * 分页查询角色
  * @param params 查询条件
  */
-export async function pageRoles (params) {
+export async function pageRoles(params) {
   const res = await request.get('/sys/role/page', {
     params
   });
   if (res.data.code == 0) {
+    // return {
+    //   list: res.data.data.records,
+    //   count: res.data.data.total
+    // }
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
 
-export async function putRoles (params) {
+export async function putRoles(params) {
   const res = await request.put('/sys/role/update', params);
   if (res.data.code == 0) {
     return res.data;
@@ -26,7 +30,7 @@ export async function putRoles (params) {
  * 查询角色列表
  * @param params 查询条件
  */
-export async function listRoles (params) {
+export async function listRoles(params) {
   let par = new URLSearchParams(params);
   const res = await request.get(`/sys/role/page?` + par, {});
   if (res.data.code == 0) {
@@ -39,7 +43,7 @@ export async function listRoles (params) {
  * 添加角色
  * @param data 角色信息
  */
-export async function addRole (data) {
+export async function addRole(data) {
   const res = await request.post('/sys/role/add', data);
   if (res.data.code == 0) {
     return res.data.message;
@@ -51,7 +55,7 @@ export async function addRole (data) {
  * 修改角色
  * @param data 角色信息
  */
-export async function updateRole (data) {
+export async function updateRole(data) {
   const res = await request.put('/system/role', data);
   if (res.data.code === 0) {
     return res.data.message;
@@ -63,7 +67,7 @@ export async function updateRole (data) {
  * 删除角色
  * @param id 角色id
  */
-export async function removeRole (id, f) {
+export async function removeRole(id, f) {
   let res;
   if (f) {
     res = await request.delete('/sys/role/delete', {
@@ -85,7 +89,7 @@ export async function removeRole (id, f) {
  * 批量删除角色
  * @param ids 角色id集合
  */
-export async function removeRoles (data) {
+export async function removeRoles(data) {
   const res = await request.delete('/system/role/batch', {
     data
   });
@@ -99,7 +103,7 @@ export async function removeRoles (data) {
  * 获取角色分配的菜单
  * @param roleId 角色id
  */
-export async function listRoleMenus (id) {
+export async function listRoleMenus(id) {
   const res = await request.get(`/sys/role/getByRoleId/${id}`);
   if (res.data.code == 0) {
     return res.data.data;
@@ -112,7 +116,7 @@ export async function listRoleMenus (id) {
  * @param roleId 角色id
  * @param data 菜单id集合
  */
-export async function updateRoleMenus (data) {
+export async function updateRoleMenus(data) {
   const res = await request.post('/sys/role/ResourceGrant', data);
   if (res.data.code == 0) {
     return res.data;

src/views/factoryModel/companyManagement/components/edit.vue

@@ -0,0 +1,212 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <el-dialog
+    class="ele-dialog-form"
+    :title="title"
+    :visible.sync="visible"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="1000px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item
+            label="工厂编码:"
+            prop="loginName"
+            style="margin-bottom: 22px"
+          >
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.loginName"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="工厂名称:"
+            prop="loginName"
+            style="margin-bottom: 22px"
+          >
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.loginName"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="所属公司:"
+            prop="loginName"
+            style="margin-bottom: 22px"
+          >
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.loginName"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="16" style="margin-bottom: 22px">
+          <el-form-item label="地址:" prop="loginName">
+            <div class="location-warp">
+              <el-cascader
+                v-model="form.value"
+                :options="cityData"
+              ></el-cascader>
+              <el-input
+                class="detail"
+                clearable
+                :maxlength="20"
+                v-model="form.location"
+                placeholder="请输入详细地址"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" style="margin-bottom: 22px">
+          <el-form-item label="状态:" prop="loginName">
+            <div class="location-warp">
+              <el-select v-model="form.location" v placeholder="请选择">
+                <el-option
+                  v-for="item in options.zt"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { regionData } from 'element-china-area-data';
+export default {
+  data() {
+    const defaultForm = {
+      id: null,
+      loginName: '',
+      roleId: [],
+      loginPwd: '',
+      enable: 1,
+      location: ''
+    };
+    return {
+      defaultForm,
+      // 表单数据
+      form: { ...defaultForm },
+      // 表单验证规则
+      rules: {
+        loginName: [
+          { required: true, message: '请输入用户账号', trigger: 'blur' }
+        ],
+        roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
+        loginPwd: [
+          {
+            required: true,
+            pattern: /^[\S]{5,18}$/,
+            message: '密码必须为5-18位非空白字符',
+            trigger: 'blur'
+          }
+        ]
+      },
+      visible: false,
+      type: '', // add/edit
+      loading: false,
+      options: {
+        zt: []
+      }
+    };
+  },
+  computed: {
+    title() {
+      switch (this.type) {
+        case 'add':
+          return '新增工厂';
+          break;
+        case 'edit':
+          return '编辑工厂';
+          break;
+        default:
+          break;
+      }
+    },
+    cityData() {
+      let result = regionData.find((n) => {
+        return n.label == '湖南省';
+      });
+      if (result) {
+        return result.children;
+      } else {
+        return [];
+      }
+    }
+  },
+  methods: {
+    open(type, row) {
+      this.type = type;
+      this.visible = true;
+    },
+    /* 保存编辑 */
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.loading = true;
+        if (!this.isUpdate) {
+          delete this.form.id;
+        }
+        const data = {
+          ...this.form
+        };
+        const saveOrUpdate = this.isUpdate ? putUsers : addUsers;
+        saveOrUpdate(data)
+          .then((msg) => {
+            this.loading = false;
+            this.$message.success(msg);
+            this.updateVisible(false);
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+      });
+    },
+    restForm() {
+      this.$refs.form.clearValidate();
+      this.form = { ...this.defaultForm };
+    },
+    handleClose() {
+      this.restForm();
+      this.visible = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.location-warp {
+  display: flex;
+  .detail {
+    margin-left: 10px;
+  }
+}
+</style>

src/views/factoryModel/companyManagement/components/search.vue

@@ -0,0 +1,100 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="工厂编码:">
+          <el-input clearable v-model="where.name" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="工厂名称:">
+          <el-input clearable v-model="where.url" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="状态:">
+          <el-select
+            v-model="where.state"
+            class="m-2"
+            placeholder="请选择"
+            size="large"
+          >
+            <el-option
+              v-for="item in options.state"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data() {
+    // 默认表单数据
+    const defaultWhere = {
+      name: '',
+      url: '',
+      state: ''
+    };
+    return {
+      defaultWhere,
+      // 表单数据
+      where: { ...defaultWhere },
+      options: {
+        state: [
+          {
+            label: '生效',
+            value: 1
+          },
+          {
+            label: '失效',
+            value: 2
+          }
+        ]
+      }
+    };
+  },
+  computed: {
+    // 是否开启响应式布局
+    styleResponsive() {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  methods: {
+    /* 搜索 */
+    search() {
+      this.$emit('search', this.where);
+    },
+    /*  重置 */
+    reset() {
+      console.log(this.defaultWhere);
+      this.where = { ...this.defaultWhere };
+      this.search();
+    }
+  }
+};
+</script>

src/views/factoryModel/companyManagement/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <search @search="search"></search>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            @click="openEdit('add')"
+          >
+            添加
+          </el-button>
+        </template>
+        <template v-slot:enable="{ row }">
+          <el-switch
+            v-model="row.enable"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            :active-value="1"
+            :inactive-value="0"
+            @change="changeEnable(row)"
+          >
+          </el-switch>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="openEdit('edit', row)"
+          >
+            修改
+          </el-link>
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此角色吗？"
+            @confirm="remove(row)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <edit ref="edit"></edit>
+  </div>
+</template>
+<script>
+import search from './components/search.vue';
+import edit from './components/edit.vue';
+export default {
+  components: {
+    search,
+    edit
+  },
+  data() {
+    return {
+      columns: [
+        {
+          width: 45,
+          type: 'index',
+          columnKey: 'index',
+          align: 'center'
+        },
+        {
+          prop: 'username',
+          label: '用户账号'
+        },
+        {
+          label: '用户名',
+          prop: 'nickname'
+        },
+        {
+          label: '手机号',
+          prop: 'phone'
+        },
+        {
+          label: '创建时间',
+          prop: 'createTime'
+        },
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 220,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+      ]
+    };
+  },
+  methods: {
+    datasource(par) {
+      console.log(par);
+      return [
+        {
+          username: 'asdad'
+        }
+      ];
+    },
+    search(where) {
+      this.$refs.table.reload({
+        where: where,
+        page: 1
+      });
+    },
+    openEdit(type, row) {
+      this.$refs.edit.open(type, row);
+    }
+  }
+};
+</script>

src/views/factoryModel/factoryManagement/components/edit.vue

@@ -0,0 +1,212 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <el-dialog
+    class="ele-dialog-form"
+    :title="title"
+    :visible.sync="visible"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="1000px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item
+            label="工厂编码:"
+            prop="loginName"
+            style="margin-bottom: 22px"
+          >
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.loginName"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="工厂名称:"
+            prop="loginName"
+            style="margin-bottom: 22px"
+          >
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.loginName"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="所属公司:"
+            prop="loginName"
+            style="margin-bottom: 22px"
+          >
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.loginName"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="16" style="margin-bottom: 22px">
+          <el-form-item label="地址:" prop="loginName">
+            <div class="location-warp">
+              <el-cascader
+                v-model="form.value"
+                :options="cityData"
+              ></el-cascader>
+              <el-input
+                class="detail"
+                clearable
+                :maxlength="20"
+                v-model="form.location"
+                placeholder="请输入详细地址"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" style="margin-bottom: 22px">
+          <el-form-item label="状态:" prop="loginName">
+            <div class="location-warp">
+              <el-select v-model="form.location" v placeholder="请选择">
+                <el-option
+                  v-for="item in options.zt"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { regionData } from 'element-china-area-data';
+export default {
+  data() {
+    const defaultForm = {
+      id: null,
+      loginName: '',
+      roleId: [],
+      loginPwd: '',
+      enable: 1,
+      location: ''
+    };
+    return {
+      defaultForm,
+      // 表单数据
+      form: { ...defaultForm },
+      // 表单验证规则
+      rules: {
+        loginName: [
+          { required: true, message: '请输入用户账号', trigger: 'blur' }
+        ],
+        roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
+        loginPwd: [
+          {
+            required: true,
+            pattern: /^[\S]{5,18}$/,
+            message: '密码必须为5-18位非空白字符',
+            trigger: 'blur'
+          }
+        ]
+      },
+      visible: false,
+      type: '', // add/edit
+      loading: false,
+      options: {
+        zt: []
+      }
+    };
+  },
+  computed: {
+    title() {
+      switch (this.type) {
+        case 'add':
+          return '新增工厂';
+          break;
+        case 'edit':
+          return '编辑工厂';
+          break;
+        default:
+          break;
+      }
+    },
+    cityData() {
+      let result = regionData.find((n) => {
+        return n.label == '湖南省';
+      });
+      if (result) {
+        return result.children;
+      } else {
+        return [];
+      }
+    }
+  },
+  methods: {
+    open(type, row) {
+      this.type = type;
+      this.visible = true;
+    },
+    /* 保存编辑 */
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.loading = true;
+        if (!this.isUpdate) {
+          delete this.form.id;
+        }
+        const data = {
+          ...this.form
+        };
+        const saveOrUpdate = this.isUpdate ? putUsers : addUsers;
+        saveOrUpdate(data)
+          .then((msg) => {
+            this.loading = false;
+            this.$message.success(msg);
+            this.updateVisible(false);
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+      });
+    },
+    restForm() {
+      this.$refs.form.clearValidate();
+      this.form = { ...this.defaultForm };
+    },
+    handleClose() {
+      this.restForm();
+      this.visible = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.location-warp {
+  display: flex;
+  .detail {
+    margin-left: 10px;
+  }
+}
+</style>

src/views/factoryModel/factoryManagement/components/search.vue

@@ -0,0 +1,100 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="工厂编码:">
+          <el-input clearable v-model="where.name" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="工厂名称:">
+          <el-input clearable v-model="where.url" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="状态:">
+          <el-select
+            v-model="where.state"
+            class="m-2"
+            placeholder="请选择"
+            size="large"
+          >
+            <el-option
+              v-for="item in options.state"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data() {
+    // 默认表单数据
+    const defaultWhere = {
+      name: '',
+      url: '',
+      state: ''
+    };
+    return {
+      defaultWhere,
+      // 表单数据
+      where: { ...defaultWhere },
+      options: {
+        state: [
+          {
+            label: '生效',
+            value: 1
+          },
+          {
+            label: '失效',
+            value: 2
+          }
+        ]
+      }
+    };
+  },
+  computed: {
+    // 是否开启响应式布局
+    styleResponsive() {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  methods: {
+    /* 搜索 */
+    search() {
+      this.$emit('search', this.where);
+    },
+    /*  重置 */
+    reset() {
+      console.log(this.defaultWhere);
+      this.where = { ...this.defaultWhere };
+      this.search();
+    }
+  }
+};
+</script>

src/views/factoryModel/factoryManagement/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <search @search="search"></search>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            @click="openEdit('add')"
+          >
+            添加
+          </el-button>
+        </template>
+        <template v-slot:enable="{ row }">
+          <el-switch
+            v-model="row.enable"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            :active-value="1"
+            :inactive-value="0"
+            @change="changeEnable(row)"
+          >
+          </el-switch>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="openEdit('edit', row)"
+          >
+            修改
+          </el-link>
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此角色吗？"
+            @confirm="remove(row)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <edit ref="edit"></edit>
+  </div>
+</template>
+<script>
+import search from './components/search.vue';
+import edit from './components/edit.vue';
+export default {
+  components: {
+    search,
+    edit
+  },
+  data() {
+    return {
+      columns: [
+        {
+          width: 45,
+          type: 'index',
+          columnKey: 'index',
+          align: 'center'
+        },
+        {
+          prop: 'username',
+          label: '用户账号'
+        },
+        {
+          label: '用户名',
+          prop: 'nickname'
+        },
+        {
+          label: '手机号',
+          prop: 'phone'
+        },
+        {
+          label: '创建时间',
+          prop: 'createTime'
+        },
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 220,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+      ]
+    };
+  },
+  methods: {
+    datasource(par) {
+      console.log(par);
+      return [
+        {
+          username: 'asdad'
+        }
+      ];
+    },
+    search(where) {
+      this.$refs.table.reload({
+        where: where,
+        page: 1
+      });
+    },
+    openEdit(type, row) {
+      this.$refs.edit.open(type, row);
+    }
+  }
+};
+</script>

src/views/system/role/index.vue

@@ -83,173 +83,173 @@
 </template>
 
 <script>
-  import RoleSearch from './components/role-search.vue';
-  import RoleEdit from './components/role-edit.vue';
-  import RoleAuth from './components/role-auth.vue';
-  import {
-    pageRoles,
-    removeRole,
-    removeRoles,
-    putRoles
-  } from '@/api/system/role';
+import RoleSearch from './components/role-search.vue';
+import RoleEdit from './components/role-edit.vue';
+import RoleAuth from './components/role-auth.vue';
+import {
+  pageRoles,
+  removeRole,
+  removeRoles,
+  putRoles
+} from '@/api/system/role';
 
-  export default {
-    name: 'SystemRole',
-    components: {
-      RoleSearch,
-      RoleEdit,
-      RoleAuth
-    },
-    data() {
-      return {
-        // 表格列配置
-        columns: [
-          {
-            columnKey: 'selection',
-            type: 'selection',
-            width: 45,
-            align: 'center',
-            fixed: 'left'
-          },
-          {
-            columnKey: 'index',
-            label: '#',
-            type: 'index',
-            width: 45,
-            align: 'center',
-            showOverflowTooltip: true,
-            fixed: 'left'
-          },
-          {
-            prop: 'name',
-            label: '角色名称',
-            align: 'center',
+export default {
+  name: 'SystemRole',
+  components: {
+    RoleSearch,
+    RoleEdit,
+    RoleAuth
+  },
+  data() {
+    return {
+      // 表格列配置
+      columns: [
+        {
+          columnKey: 'selection',
+          type: 'selection',
+          width: 45,
+          align: 'center',
+          fixed: 'left'
+        },
+        {
+          columnKey: 'index',
+          label: '#',
+          type: 'index',
+          width: 45,
+          align: 'center',
+          showOverflowTooltip: true,
+          fixed: 'left'
+        },
+        {
+          prop: 'name',
+          label: '角色名称',
+          align: 'center',
 
-            showOverflowTooltip: true,
-            minWidth: 110
-          },
-          {
-            prop: 'groupId',
-            label: '组织ID',
-            align: 'center',
+          showOverflowTooltip: true,
+          minWidth: 110
+        },
+        {
+          prop: 'groupId',
+          label: '组织ID',
+          align: 'center',
 
-            showOverflowTooltip: true,
-            minWidth: 110
-          },
-          {
-            prop: 'enable',
-            label: '启用状态',
-            align: 'center',
+          showOverflowTooltip: true,
+          minWidth: 110
+        },
+        {
+          prop: 'enable',
+          label: '启用状态',
+          align: 'center',
 
-            showOverflowTooltip: true,
-            slot: 'enable',
+          showOverflowTooltip: true,
+          slot: 'enable',
 
-            minWidth: 110
-          },
-          {
-            prop: 'createTime',
-            label: '创建时间',
-            align: 'center',
+          minWidth: 110
+        },
+        {
+          prop: 'createTime',
+          label: '创建时间',
+          align: 'center',
 
-            showOverflowTooltip: true,
-            minWidth: 110,
-            formatter: (_row, _column, cellValue) => {
-              return this.$util.toDateString(cellValue);
-            }
-          },
-          {
-            columnKey: 'action',
-            label: '操作',
-            width: 230,
-            align: 'center',
-            resizable: false,
-            slot: 'action',
-            showOverflowTooltip: true
+          showOverflowTooltip: true,
+          minWidth: 110,
+          formatter: (_row, _column, cellValue) => {
+            return this.$util.toDateString(cellValue);
           }
-        ],
-        // 表格选中数据
-        selection: [],
-        // 当前编辑数据
-        current: null,
-        // 是否显示编辑弹窗
-        showEdit: false,
-        // 是否显示导入弹窗
-        showAuth: false
-      };
+        },
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 230,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+      ],
+      // 表格选中数据
+      selection: [],
+      // 当前编辑数据
+      current: null,
+      // 是否显示编辑弹窗
+      showEdit: false,
+      // 是否显示导入弹窗
+      showAuth: false
+    };
+  },
+  created() {},
+  methods: {
+    /* 表格数据源 */
+    datasource({ page, limit, where, order }) {
+      console.log(where);
+      return pageRoles({ pageNum: page, size: limit, ...where });
+    },
+    async changeEnable(row) {
+      const res = await putRoles(row);
+      if (res.code == 0) {
+        this.$message({
+          type: 'success',
+          message: '修改成功',
+          customClass: 'ele-message-border'
+        });
+        this.reload();
+      }
+    },
+    /* 刷新表格 */
+    reload(where) {
+      this.$refs.table.reload({ page: 1, where });
+    },
+    /* 显示编辑 */
+    openEdit(row) {
+      this.current = row;
+      this.showEdit = true;
     },
-    created() {},
-    methods: {
-      /* 表格数据源 */
-      datasource({ page, limit, where, order }) {
-        console.log(where);
-        return pageRoles({ pageNum: page, size: limit, ...where });
-      },
-      async changeEnable(row) {
-        const res = await putRoles(row);
-        if (res.code == 0) {
-          this.$message({
-            type: 'success',
-            message: '修改成功',
-            customClass: 'ele-message-border'
-          });
+    /* 显示分配权限 */
+    openAuth(row) {
+      this.current = row;
+      this.showAuth = true;
+    },
+    /* 删除 */
+    remove(row) {
+      const loading = this.$loading({ lock: true });
+      removeRole(row.id)
+        .then((msg) => {
+          loading.close();
+          this.$message.success(msg);
           this.reload();
-        }
-      },
-      /* 刷新表格 */
-      reload(where) {
-        this.$refs.table.reload({ page: 1, where });
-      },
-      /* 显示编辑 */
-      openEdit(row) {
-        this.current = row;
-        this.showEdit = true;
-      },
-      /* 显示分配权限 */
-      openAuth(row) {
-        this.current = row;
-        this.showAuth = true;
-      },
-      /* 删除 */
-      remove(row) {
-        const loading = this.$loading({ lock: true });
-        removeRole(row.id)
-          .then((msg) => {
-            loading.close();
-            this.$message.success(msg);
-            this.reload();
-          })
-          .catch((e) => {
-            loading.close();
-            this.$message.error(e.message);
-          });
-      },
-      /* 批量删除 */
-      removeBatch() {
-        if (!this.selection.length) {
-          this.$message.error('请至少选择一条数据');
-          return;
-        }
-        this.$confirm('确定要删除选中的角色吗?', '提示', {
-          type: 'warning'
         })
-          .then(() => {
-            const loading = this.$loading({ lock: true });
-            removeRole(
-              this.selection.map((d) => d.id),
-              true
-            )
-              .then((msg) => {
-                loading.close();
-                this.$message.success(msg);
-                this.reload();
-              })
-              .catch((e) => {
-                loading.close();
-                this.$message.error(e.message);
-              });
-          })
-          .catch(() => {});
+        .catch((e) => {
+          loading.close();
+          this.$message.error(e.message);
+        });
+    },
+    /* 批量删除 */
+    removeBatch() {
+      if (!this.selection.length) {
+        this.$message.error('请至少选择一条数据');
+        return;
       }
+      this.$confirm('确定要删除选中的角色吗?', '提示', {
+        type: 'warning'
+      })
+        .then(() => {
+          const loading = this.$loading({ lock: true });
+          removeRole(
+            this.selection.map((d) => d.id),
+            true
+          )
+            .then((msg) => {
+              loading.close();
+              this.$message.success(msg);
+              this.reload();
+            })
+            .catch((e) => {
+              loading.close();
+              this.$message.error(e.message);
+            });
+        })
+        .catch(() => {});
     }
-  };
+  }
+};
 </script>