新增页面，修改页面布局情况

editorconfig.md

+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

src/api/colorfulIcon.js

+import request from '@/utils/request'
+
+//const serverURL = "https://vab-unicloud-3a9da9.service.tcloudbase.com";
+//const apiURL = "/colorfulIcon/getList";
+
+export function getIconList(params) {
+  return request({
+    url: '/colorfulIcon/getList',
+    method: 'get',
+    params,
+  })
+}

src/api/departmentManagement.js

+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/departmentManagement/getList',
+    method: 'get',
+    params,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/departmentManagement/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/departmentManagement/doDelete',
+    method: 'post',
+    data,
+  })
+}

src/api/description.js

+import request from '@/utils/request'
+
+//const serverURL = "https://vab-unicloud-3a9da9.service.tcloudbase.com";
+///const apiURL = "/description/getList";
+
+export function getList() {
+  return request({
+    url: '/description/getList',
+    method: 'get',
+  })
+}

src/api/goods.js

+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/goods/getList',
+    method: 'get',
+    params,
+  })
+}

src/api/menuManagement.js

+import request from '@/utils/request'
+
+export function getTree(params) {
+  return request({
+    url: '/menuManagement/getTree',
+    method: 'get',
+    params,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/menuManagement/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/menuManagement/doDelete',
+    method: 'post',
+    data,
+  })
+}

src/api/notice.js

+import request from '@/utils/request'
+
+//const serverURL = "https://vab-unicloud-3a9da9.service.tcloudbase.com";
+//const apiURL = "/notice/getList";
+
+export function getList() {
+  return request({
+    url: '/notice/getList',
+    method: 'get',
+  })
+}

src/api/publicKey.js

+import request from '@/utils/request'
+
+export function getPublicKey() {
+  return request({
+    url: '/publicKey',
+    method: 'get',
+  })
+}

src/api/roleManagement.js

+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/roleManagement/getList',
+    method: 'get',
+    params,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/roleManagement/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/roleManagement/doDelete',
+    method: 'post',
+    data,
+  })
+}

src/api/userManagement.js

+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/userManagement/getList',
+    method: 'get',
+    params,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/userManagement/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/userManagement/doDelete',
+    method: 'post',
+    data,
+  })
+}

src/components/blockHeader.vue

+<template>
+  <!--页头-->
+  <div class="block-header">
+    <div class="b-header-inner">
+      <h3>{{ title }}</h3>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:"BlockHeader",
+  props: ['title']
+}
+</script>
+
+<style lang="scss" scoped>
+
+.block-header {
+  display: flex;
+  justify-content: flex-start;
+  align-content: center;
+  padding: 10px 12px;
+  min-height: 40px;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+  background: #f7f8fa;
+}
+
+.b-header-inner {
+  display: flex;
+  align-items: center;
+}
+
+.b-header-inner::before {
+  content: "";
+  background-color: #155bd4;
+  width: 3px;
+  height: 14px;
+  margin-right: 8px;
+}
+
+.b-header-inner h3 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #323233;
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+}
+</style>

src/minix/index.js

+import BlockHeader from '@/components/blockHeader'
+export default {
+  name: "Login",
+  components:{
+    BlockHeader
+  }
+}

src/server/api.js

+import request from "@/utils/request";
+
+// 登录
+export default {
+  // 登录
+  login(data) {
+    return request({
+      url: "/sysUser/login",
+      method: "post",
+      data
+    });
+  },
+  // 登出
+  logout(data) {
+    return request({
+      url: "/sysUser/logout",
+      method: "post",
+      data
+    });
+  },
+  // 用户信息
+  userInfo(params) {
+    return request({
+      url: "/sysUser/getInfo",
+      method: "get",
+      params
+    });
+  },
+  // 发送验证码
+  send_msg_code(data) {
+    return request({
+      url: "/sysUser/transmitCode",
+      method: "post",
+      data
+    });
+  },
+  // 获取菜单列表
+  menu(params) {
+    return request({
+      url: "/sysUser/getRouters",
+      method: "get",
+      params
+    });
+  },
+  // 商户列表
+  merchant_list(data) {
+    return request({
+      url: "/macy/selectMacyList",
+      method: "post",
+      data
+    });
+  },
+  // 商户新增
+  merchant_add(data) {
+    return request({
+      url: "/macy/createdMacy",
+      method: "post",
+      data
+    });
+  },
+  // 商户更新
+  merchant_update(data) {
+    return request({
+      url: "/macy/editMacy",
+      method: "post",
+      data
+    });
+  },
+  // 商户详情
+  merchant_view(params) {
+    return request({
+      url: "/macy/selectMacyByTenantNo",
+      method: "get",
+      params
+    });
+  },
+  // 产品列表
+  merchant_select(params) {
+    return request({
+      url: "/macy/selectList",
+      method: "get",
+      params
+    });
+  },
+  // 产品列表
+  prod_list(data) {
+    return request({
+      url: "/macy/selectProductPageList",
+      method: "post",
+      data
+    });
+  },
+  // 产品新增
+  prod_add(data) {
+    return request({
+      url: "/macy/createdProductInfo",
+      method: "post",
+      data
+    });
+  },
+  // 产品编辑
+  prod_update(data) {
+    return request({
+      url: "/macy/editProductInfo",
+      method: "post",
+      data
+    });
+  },
+  // 产品上下架
+  prod_switch_upDown(params) {
+    return request({
+      url: "/macy/editProductInfoByStatus",
+      method: "get",
+      params
+    });
+  },
+  // 产品查看
+  prod_view(params) {
+    return request({
+      url: "/macy/selectProductInfoByappNo",
+      method: "get",
+      params
+    });
+  },
+  // 申请列表
+  apply_list(data) {
+    return request({
+      url: "/zeus/pageQueryApply",
+      method: "post",
+      data
+    });
+  },
+  // 推送
+  apply_push(params) {
+    return request({
+      url: "/zeus/applyRetryPush",
+      method: "get",
+      params
+    });
+  },
+  // 公告列表
+  notice_list(data) {
+    return request({
+      url: "/smgw/getBackPageList",
+      method: "post",
+      data
+    });
+  },
+  // 公告发送
+  notice_add(data) {
+    return request({
+      url: "/smgw/sendZnx",
+      method: "post",
+      data
+    });
+  },
+  // 公告编辑
+  notice_detail(data) {
+    return request({
+      url: "/smgw/getNotice",
+      method: "post",
+      data
+    });
+  },
+  // 公告编辑
+  notice_edit(data) {
+    return request({
+      url: "/smgw/updateNotice",
+      method: "post",
+      data
+    });
+  },
+  // 回现APP设置
+  app_setting(params) {
+    return request({
+      url: "/manage/getList",
+      method: "get",
+      params
+    });
+  },
+  // 变更状态
+  app_setting_update(data) {
+    return request({
+      url: "/manage/update",
+      method: "post",
+      data
+    });
+  },
+  // 变更状态
+  dict(params) {
+    return request({
+      url: "/dictData/selectBydictType",
+      method: "get",
+      params
+    });
+  }
+};

src/vab/components/ColorfullIcon/index.vue

+<template>
+  <img
+    v-if="isExternal"
+    :src="styleExternalIcon"
+    class="img-icon"
+    v-on="$listeners"
+  />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+  import { isExternal } from '@/utils/validate'
+
+  export default {
+    name: 'VabColorfulIcon',
+    props: {
+      iconClass: {
+        type: String,
+        required: true,
+      },
+      className: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      isExternal() {
+        return isExternal(this.iconClass)
+      },
+      iconName() {
+        return `#colorful-icon-${this.iconClass}`
+      },
+      svgClass() {
+        if (this.className) {
+          return 'svg-icon ' + this.className
+        } else {
+          return 'svg-icon'
+        }
+      },
+      styleExternalIcon() {
+        return this.iconClass
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    overflow: hidden;
+    vertical-align: middle;
+    fill: currentColor;
+  }
+
+  .img-icon {
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    vertical-align: middle;
+  }
+</style>

src/views/admin/components/new.vue

+<template>
+  <div class="merchant-new">
+    <el-form
+      ref="h5form"
+      label-suffix=":"
+      :rules="rules"
+      :model="form"
+      label-width="120px"
+    >
+      <block-header title="创建公告" />
+      <el-form-item
+        prop="appLogo"
+        class="form-item"
+        label="公告标题ICON"
+      >
+        <el-upload
+          class="avatar-uploader"
+          :action="uploadUrl"
+          :with-credentials="true"
+          list-type="picture-card"
+          :show-file-list="false"
+          :on-success="handleSuccessLogo"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img
+            v-if="form.znxTitleUrl"
+            :src="form.znxTitleUrl"
+            class="avatar"
+          >
+          <i
+            v-else
+            class="el-icon-plus avatar-uploader-icon"
+          />
+        </el-upload>
+      </el-form-item>
+      <el-form-item
+        prop="znxTitle"
+        class="form-item"
+        label="公告标题"
+      >
+        <el-select
+          v-model="form.znxTitle"
+          style="width: 100%"
+          size="mini"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in select"
+            :key="item.code"
+            :label="item.value"
+            :value="item.code"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        prop="znxContent"
+        class="form-item"
+        label="公告内容"
+      >
+        <el-input
+          v-model="form.znxContent"
+          type="textarea"
+          :rows="3"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="false"
+        prop="znxHref"
+        class="form-item"
+        label="公告跳转链接"
+      >
+        <el-input v-model="form.znxHref">
+          <template slot="prepend">
+            http://
+          </template>
+        </el-input>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          @click="onSubmit('h5form')"
+        >
+          保存
+        </el-button>
+        <el-button @click="onReset('h5form')">
+          重置
+        </el-button>
+        <el-button @click="$router.go(-1)">
+          取消
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import BlockHeader from "@/components/blockHeader";
+import API from "@/server/api";
+
+const $API = process.env.VUE_APP_API_PATH;
+
+export default {
+  name: "MerchantNew",
+  components: {
+    "block-header": BlockHeader
+  },
+  data() {
+    return {
+      select:{},
+      uploadUrl: `${$API}/sysUser/upload`,
+      form: {
+        znxTitle: "",
+        znxTitleUrl: "",
+        znxContent: "",
+        znxHref: ""
+      },
+      rules: {
+        znxTitle: [{ required: true, message: "请选择公告标题", trigger: "blur" }],
+        znxTitleUrl: [{ required: false, message: "请上传公告标题ICON", trigger: "change" }],
+        znxContent: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
+        znxHref: [{ required: false, message: "请输入公告跳转链接", trigger: "blur" }]
+      }
+    };
+  },
+  async created() {
+    // 再请求表单
+    await this.initDict();
+    const { query } = this.$route;
+    if (query && query.id) {
+      this.id = query.id;
+      await this.init();
+    }
+  },
+  methods: {
+    async initDict() {
+      const result = await API.dict({
+        dictType:'ZNXTITLE'
+      });
+      console.log(result,'hah')
+      if(result.success){
+        this.select = result.result;
+      }
+    },
+    async init() {
+      const id = this.id;
+      const { result, success } = await API.notice_detail({ id });
+      if (success) {
+        this.form = result;
+      }
+    },
+    handleSuccessLogo(res) {
+      this.form.znxTitleUrl = res.result;
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isPNG = file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG && !isPNG) {
+        this.$message.error("上传图片只能是 JPG 或者 PNG 格式!");
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2MB!");
+        return false;
+      }
+      return true;
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          const form = Object.assign({}, this.form);
+          let result;
+          if (this.id) {
+            result = await API.notice_edit({ ...form });
+          } else {
+            result = await API.notice_add({ ...form });
+          }
+
+          if (result.success) {
+            this.$baseMessage("保存成功", "success");
+            setTimeout(() => {
+              this.$router.back();
+            }, 1500);
+          }
+        }
+      });
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+};
+</script>
+
+<style lang="scss" src='../index.scss'></style>

src/views/admin/index.scss

+.merchant-new{
+  box-sizing: border-box;
+  padding: 20px;
+}
+.form-item{
+  width:500px;
+  margin-bottom: 24px !important;
+}
+
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+.avatar {
+  width: 120px;
+  height: 120px;
+  display: block;
+}
+
+//.el-input{
+//  width:200px;
+//}

src/views/admin/user.vue

+<template>
+  <div class="page-fence">
+    <!--操作菜单栏-->
+    <block-header title="公告列表" />
+    <div
+      v-if="true"
+      class="action-bar"
+    >
+      <div class="action-bar-left">
+        <router-link to="/notice/new">
+          <el-button
+            icon="el-icon-plus"
+            type="primary"
+            size="mini"
+          >
+            新增公告
+          </el-button>
+        </router-link>
+      </div>
+    </div>
+
+    <!--表格-->
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      border
+      :data="list"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :sortable="item.sortable"
+        :width="item.width"
+        :fixed="!!item.fixed"
+        :show-overflow-tooltip="!!item.overflow"
+      >
+        <template #default="{ row }">
+          <div v-if="item.label==='H5链接'">
+            <el-link
+              type="primary"
+              :href="row[item.prop]"
+              target="_blank"
+            >
+              {{ row[item.prop] }}
+            </el-link>
+          </div>
+          <div v-else-if="item.label==='标题ICON'">
+            <el-image
+              style="width: 50px; height: 35px"
+              :src="row[item.prop]"
+              fit="fit"
+            />
+          </div>
+          <div v-else-if="item.label==='公告状态'">
+            <el-tag
+              v-if="row[item.prop]===0"
+              type="success"
+            >
+              已上架
+            </el-tag>
+            <el-tag
+              v-else
+              type="info"
+            >
+              已下架
+            </el-tag>
+          </div>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        width="150"
+        fixed="right"
+        align="center"
+        label="操作"
+      >
+        <template #default="{ row }">
+          <el-button
+            v-if="row.isDelete===0"
+            size="mini"
+            type="danger"
+            @click="handleChangeStatus(row)"
+          >
+            下架
+          </el-button>
+          <el-button
+            v-else
+            size="mini"
+            type="success"
+            @click="handleChangeStatus(row)"
+          >
+            上架
+          </el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleView(row)"
+          >
+            <span>详情</span>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :current-page="queryForm.current"
+      :layout="layout"
+      :page-size="queryForm.size"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import { doDelete, getList } from "@/api/table";
+import API from "@/server/api";
+
+export default {
+  name: "Fence",
+  data() {
+    return {
+      checkList: ["标题", "标题ICON", "公告内容", "公告状态",'发布人', "创建时间"],
+      columns: [
+        {
+          order: 1,
+          label: "标题",
+          prop: "znxTitle"
+        },
+        {
+          order: 2,
+          label: "标题ICON",
+          prop: "znxTitleUrl"
+        },
+        {
+          order: 3,
+          label: "公告内容",
+          overflow: true,
+          prop: "znxContent"
+        },
+        {
+          order: 5,
+          label: "公告状态",
+          prop: "isDelete"
+        },
+        {
+          order: 6,
+          label: "发布人",
+          prop: "znxCreateby"
+        },
+        {
+          order: 7,
+          label: "创建时间",
+          prop: "gmtCreate"
+        }
+      ],
+      list: [],
+      listLoading: true,
+      layout: "total, sizes, prev, pager, next, jumper",
+      total: 0,
+      queryForm: {
+        current: 1,
+        size: 10
+      }
+    };
+  },
+  computed: {
+    finallyColumns() {
+      let finallyArray = [];
+      this.checkList.forEach((checkItem) => {
+        finallyArray.push(
+          this.columns.filter((item) => item.label === checkItem)[0]
+        );
+      });
+      //return _.sortBy(finallyArray, (item) => item.order);
+      return finallyArray;
+    }
+  },
+  created() {
+    //防止三级以上路由时多次走created
+    if (this.$route.name === this.$options.name) this.fetchData();
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    onSubmit() {
+      this.fetchData();
+    },
+    handleView(row){
+      const {id} = row;
+      this.$router.push({
+        path: '/notice/new',
+        query: { id }
+      })
+    },
+    async handleChangeStatus(row) {
+      const { id, isDelete } = row;
+      console.log(row, "是");
+      const result = await API.notice_edit({
+        id,
+        isDelete: !isDelete ? 1 :0
+      });
+      if (result.success) {
+        this.$baseMessage("修改成功", "success");
+        setTimeout(() => {
+          this.fetchData();
+        }, 1500);
+      }
+
+    },
+    handleSizeChange(val) {
+      this.queryForm.size = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.queryForm.current = val;
+      this.fetchData();
+    },
+    handleQuery() {
+      this.queryForm.current = 1;
+      this.fetchData();
+    },
+    async fetchData() {
+      this.listLoading = true;
+      const result = await API.notice_list(this.queryForm);
+      const { records, total } = result.result;
+      this.list = records;
+      this.total = total;
+      this.listLoading = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.page-fence {
+  ::v-deep {
+    i {
+      cursor: pointer;
+    }
+  }
+
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>
+<style lang="scss">
+.custom-table-checkbox {
+  .el-checkbox {
+    display: block !important;
+    margin: 0 0 $base-padding/4 0;
+  }
+}
+
+.action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+
+  .action-bar-left, .action-bar-right {
+    flex: 1;
+  }
+
+  .action-bar-right {
+    text-align: right;
+  }
+}
+</style>

src/views/approval/components/index.scss

+.merchant-new{
+  box-sizing: border-box;
+  padding: 20px;
+}
+.form-item{
+  width:500px;
+  margin-bottom: 24px !important;
+}
+.mc-form-item{
+  width:800px;
+  margin-bottom: 24px !important;
+}
+
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+.avatar {
+  width: 120px;
+  height: 120px;
+  display: block;
+}
+
+//.el-input{
+//  width:200px;
+//}

src/views/approval/detail.vue

+<template>
+  <div class="merchant-new">
+    <el-form
+      ref="h5form"
+      label-suffix=":"
+      :rules="rules"
+      :model="form"
+      label-width="120px"
+    >
+      <block-header title="对接信息" />
+      <el-form-item
+        class="form-item"
+        label="对接机构"
+      >
+        <el-select
+          v-model="form.tenantNo"
+          :disabled="!!appNo"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="(item,index) in merchant"
+            :key="index"
+            :label="item.tenantName"
+            :value="item.tenantNo"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        class="form-item"
+        label="对接方式"
+      >
+        <el-select
+          v-model="form.abutmentWay"
+          :disabled="!!appNo"
+          placeholder="请选择"
+        >
+          <el-option
+            label="API"
+            value="API"
+          />
+          <el-option
+            label="H5"
+            value="H5"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import BlockHeader from "@/components/blockHeader";
+import API from "@/server/api";
+const $API  = process.env.VUE_APP_API_PATH;
+
+export default {
+  name: "MerchantNew",
+  components: {
+    "block-header": BlockHeader
+  },
+  data() {
+    return {
+      uploadUrl:`${$API}/sysUser/upload`,
+      appNo:'',
+      form: {
+        tenantNo: "",
+        abutmentWay: "",
+        gradeSort: "3",
+        appLogo: "",
+        appName: "MC产品",
+        appInfo: "产品介绍",
+        abstratInfo: "产品摘要",
+        applyAmtMin: "300",
+        applyAmtMax: "500",
+        withdrawSpan: "1000",
+        incomeCount: "1000",
+        approvalTime: "1000",
+        raiseTimeMax: "7",
+        raiseTimeMin: "5",
+        memo: "1000",
+        customerNumbers: "400", // 客服电话
+        creditWay: 1 // 授信方式
+      },
+      rules: {
+        tenantNo: [{ required: true, message: "请选择机构名称", trigger: "change" }],
+        abutmentWay: [{ required: true, message: "请选择对接方式", trigger: "change" }],
+        appName: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
+        appLogo: [{ required: true, message: "请上传产品LOGO图片", trigger: "blur" }],
+        appInfo: [{ required: true, message: "请输入产品描述", trigger: "blur" }],
+        abstratInfo: [{ required: true, message: "请输入产品摘要", trigger: "blur" }],
+        customerNumbers: [{ required: true, message: "请输入客服电话", trigger: "blur" }],
+        creditWay: [{ required: true, message: "请选择授信方式", trigger: "blur" }],
+        gradeSort: [
+          {
+            required: true,
+            message: "请输入产品等级",
+            trigger: "blur"
+          }
+        ],
+
+        raiseTimeMin: [
+          { required: true, message: "请输入时间", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value * 1 >= this.form.raiseTimeMax * 1) {
+                callback(new Error("时间不大于最大时间"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+        raiseTimeMax: [
+          { required: true, message: "请输入时间", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value * 1 <= this.form.raiseTimeMin * 1) {
+                callback(new Error("时间不小于最小时间"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+
+        applyAmtMin: [
+          { required: true, message: "请输入额度", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value * 1 >= this.form.applyAmtMax * 1) {
+                callback(new Error("额度必须小于最大额度"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+        applyAmtMax: [
+          { required: true, message: "请输入额度", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value * 1 <= this.form.applyAmtMin * 1) {
+                callback(new Error("额度必须大于最小额度"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+
+        incomeTimeBefore: [
+          { required: true, message: "请输入时间", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value * 1 >= this.form.incomeTimeLate * 1) {
+                callback(new Error("时间须小于结束时间"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+        incomeTimeLate: [
+          { required: true, message: "请输入时间", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value * 1 <= this.form.incomeTimeBefore * 1) {
+                callback(new Error("时间须大于开始时间"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+
+        withdrawSpan: [{ required: true, message: "请输入提现跨度", trigger: "blur" }],
+        approvalTime: [{ required: true, message: "请输入申请时间", trigger: "blur" }],
+        incomeCount: [{ required: true, message: "请输入每日进件上限", trigger: "blur" }]
+      },
+      merchant: []
+    };
+  },
+  async created() {
+
+    // 初始化机构列表
+    await this.initMerchant();
+
+    // 再请求表单
+    const { query } = this.$route;
+    if (query && query.appNo) {
+      this.appNo = query.appNo;
+      await this.initProd();
+
+      await this.initDict("SYS_USER_SEX");
+      await this.initDict("EDUCATIONAL");
+      await this.initDict("MONTHLY_INCOME");
+      await this.initDict("MARRIAGE");
+      await this.initDict("REGION");
+    }
+
+  },
+
+  methods: {
+    // 初始化机构列表
+    async initMerchant() {
+      const result = await API.merchant_select();
+      if (result.success) {
+        this.merchant = result.result;
+      }
+    },
+    // 初始化产品信息
+    async initProd() {
+      const appNo = this.appNo;
+      const { result, success } = await API.prod_view({ appNo });
+      if (success) {
+        //result.creditWay = result.creditWay+'';
+        this.form = result;
+      }
+    },
+    // 初始化字典
+    async initDict(dictType) {
+      const result = await API.dict({
+        dictType
+      });
+      if (result.success) {
+        const data = result.result;
+        switch (dictType) {
+          case "SYS_USER_SEX":
+            this.dict.sex = data;
+            break;
+          case "EDUCATIONAL":
+            this.dict.edu = data;
+            break;
+          case "MARRIAGE":
+            this.dict.marriage = data;
+            break;
+          case "REGION":
+            this.dict.region = data;
+            break;
+          case "MONTHLY_INCOME":
+            this.dict.money = data;
+            break;
+        }
+      }
+    },
+
+    handleSuccessLogo(res) {
+      this.form.appLogo = res.result;
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isPNG = file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG && !isPNG) {
+        this.$message.error("上传图片只能是 JPG 或者 PNG 格式!");
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2MB!");
+        return false;
+      }
+      return true;
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          const form = Object.assign({}, this.form);
+          //form.tenantNo = this.tenantNo;
+          //form.abutmentWay = 'API'
+          let result;
+          if(this.appNo){
+            form.appNo = this.appNo;
+            result = await API.prod_update({ ...form });
+          }else{
+            result = await API.prod_add({ ...form });
+          }
+
+          if (result.success) {
+            this.$baseMessage("产品保存成功", "success");
+            setTimeout(() => {
+              this.$router.back();
+            }, 1500);
+          }
+        }
+      });
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+};
+</script>
+
+<style lang="scss" src="./index.scss"></style>

src/views/approval/index.scss

+.merchant-new{
+  box-sizing: border-box;
+  padding: 20px;
+}

src/views/approval/new.vue

+<template>
+  <div class="merchant-new">
+    <el-form
+      ref="h5form"
+      label-suffix=":"
+      :rules="rules"
+      :model="form"
+      label-width="120px"
+    >
+      <block-header title="对接信息" />
+      <el-form-item
+        prop="tenantNo"
+        class="form-item"
+        label="对接机构"
+      >
+        <el-select
+          v-model="form.tenantNo"
+          :disabled="isEdit"
+          placeholder="请选择"
+          @change="handleChange"
+        >
+          <el-option
+            v-for="(item,index) in merchant"
+            :key="index"
+            :label="item.tenantName"
+            :value="item.tenantNo"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        prop="abutmentWay"
+        class="form-item"
+        label="对接方式"
+      >
+        <el-select
+          v-model="form.abutmentWay"
+          :disabled="isEdit"
+          placeholder="请选择"
+          @change="handleChange"
+        >
+          <el-option
+            label="API"
+            value="API"
+          />
+          <el-option
+            label="H5"
+            value="H5"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template>
+      <component
+        :is="com"
+        :params="params"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import ComH5 from "@/views/approval/components/comH5";
+import ComAPI from "@/views/approval/components/comAPI";
+import API from "@/server/api";
+
+const $API = process.env.VUE_APP_API_PATH;
+
+export default {
+  name: "MerchantNew",
+  components: {
+    ComH5,
+    ComAPI
+  },
+  data() {
+    return {
+      visible: false,
+      com: "",
+      params: null,
+      isEdit: false,
+
+      form: {
+        tenantNo: "",
+        abutmentWay: ""
+      },
+      rules: {
+        tenantNo: [{ required: true, message: "请选择机构名称", trigger: "change" }],
+        abutmentWay: [{ required: true, message: "请选择对接方式", trigger: "change" }]
+      },
+      merchant: []
+    };
+  },
+  async created() {
+    // 初始化机构列表
+    await this.initMerchant();
+
+    // 再请求表单
+    const { query } = this.$route;
+    if (query && query.appNo) {
+      this.appNo = query.appNo;
+      this.isEdit = true;
+      await this.initProd();
+    }
+  },
+
+  methods: {
+    // 初始化机构列表
+    async initMerchant() {
+      const result = await API.merchant_select();
+      if (result.success) {
+        this.merchant = result.result;
+      }
+    },
+    // 初始化产品信息
+    async initProd() {
+      const appNo = this.appNo;
+      const { result, success } = await API.prod_view({ appNo });
+      if (success) {
+        if (result.region) {
+          result.region = JSON.parse(result.region);
+        }
+        this.form = result;
+        this.params = result;
+        this.params.appNo = this.appNo;
+        this.visible = true;
+        // 那啥
+        this.handleChange();
+      }
+    },
+    handleChange() {
+      const { tenantNo, abutmentWay } = this.form;
+      if (tenantNo && abutmentWay) {
+        this.params = this.form;
+        this.visible = true;
+        if (abutmentWay === "H5") {
+          this.com = "ComH5";
+        } else if (abutmentWay === "API") {
+          this.com = "ComAPI";
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" src="./index.scss"></style>

src/views/approval/order.vue

+<template>
+  <div class="page-fence">
+    <!--搜索-->
+    <block-header title="搜索" />
+    <div class="search">
+      <el-form
+        label-suffix=":"
+        :inline="true"
+        :model="queryForm"
+        class="form-inline"
+      >
+        <el-form-item label="授信类型">
+          <el-input
+            v-model="queryForm.tenantNo"
+            clearable
+            placeholder="请输入机构编号"
+          />
+        </el-form-item>
+        <el-form-item label="审批状态">
+          <el-input
+            v-model="queryForm.appName"
+            clearable
+            placeholder="请输入机构名称"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-input
+            v-model="queryForm.appName"
+            clearable
+            placeholder="请输入机构名称"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            icon="el-icon-search"
+            type="primary"
+            @click="onSubmit"
+          >
+            搜 索
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!--操作菜单栏-->
+    <block-header title="产品列表" />
+    <div
+      v-if="true"
+      class="action-bar"
+    >
+      <div class="action-bar-left">
+        <router-link to="/prod/new">
+          <el-button
+            icon="el-icon-plus"
+            type="primary"
+            size="mini"
+          >
+            新增产品
+          </el-button>
+        </router-link>
+      </div>
+      <div class="action-bar-right" />
+    </div>
+
+
+    <!--表格-->
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      border
+      size="small"
+      :data="list"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :sortable="item.sortable"
+        :width="item.width"
+        :fixed="!!item.fixed"
+        :show-overflow-tooltip="!!item.overflow"
+      >
+        <template #default="{ row }">
+          <div v-if="item.label==='LOGO'">
+            <el-image
+              style="width: 50px; height: 35px"
+              :src="row[item.prop]"
+              fit="fit"
+            />
+          </div>
+          <div v-else-if="item.label==='产品状态'">
+            <el-tag
+              v-if="row[item.prop] === '1'"
+              type="success"
+              size="mini"
+            >
+              启用
+            </el-tag>
+            <el-tag
+              v-else
+              type="info"
+              size="mini"
+            >
+              禁用
+            </el-tag>
+          </div>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        width="170"
+        fixed="right"
+        align="center"
+        label="操作"
+      >
+        <template #default="{ row }">
+          <el-button
+            v-if="row.status==='1'"
+            size="mini"
+            type="danger"
+            @click="handleClick(row)"
+          >
+            禁用
+          </el-button>
+          <el-button
+            v-else
+            size="mini"
+            type="success"
+            @click="handleClick(row)"
+          >
+            启用
+          </el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleView(row)"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :current-page="queryForm.current"
+      :layout="layout"
+      :page-size="queryForm.size"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import { doDelete, getList } from "@/api/table";
+import API from "@/server/api";
+
+export default {
+  name: "Fence",
+  data() {
+    return {
+      checkList: ["授信编号", "客户姓名", "对应BD", "商户区域", "审核金额", "审核结果", "审批状态", "创建时间"],
+      columns: [
+        {
+          order: 1,
+          label: "授信编号",
+          prop: "gradeSort"
+        },
+        {
+          order: 2,
+          label: "客户姓名",
+          prop: "appNo"
+        },
+        {
+          order: 3,
+          label: "对应BD",
+          prop: "appName"
+        },
+        {
+          order: 4,
+          label: "商户区域",
+          prop: "appLogo"
+        },
+        {
+          order: 5,
+          label: "审核金额",
+          prop: "tenantNo",
+          overflow: true
+        },
+        {
+          order: 6,
+          label: "审核结果",
+          prop: "status"
+        },
+        {
+          order: 7,
+          label: "审批状态",
+          prop: "abutmentWay"
+        },
+        {
+          order: 8,
+          width: 170,
+          label: "创建时间",
+          prop: "gmtCreated"
+        }
+      ],
+      list: [],
+      listLoading: true,
+      layout: "total, sizes, prev, pager, next, jumper",
+      total: 0,
+      queryForm: {
+        current: 1,
+        size: 10,
+        status: "",
+        appName: "",
+        tenantNo: ""
+      }
+    };
+  },
+  computed: {
+    finallyColumns() {
+      let finallyArray = [];
+      this.checkList.forEach((checkItem) => {
+        finallyArray.push(
+          this.columns.filter((item) => item.label === checkItem)[0]
+        );
+      });
+      return _.sortBy(finallyArray, (item) => item.order);
+      //return finallyArray;
+    }
+  },
+  created() {
+    //防止三级以上路由时多次走created
+    if (this.$route.name === this.$options.name) this.fetchData();
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    onSubmit() {
+      this.fetchData();
+    },
+    handleView(row) {
+      const { appNo } = row;
+      this.$router.push({
+        path: "/prod/new",
+        query: { appNo }
+      });
+    },
+    handleSizeChange(val) {
+      this.queryForm.size = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.queryForm.current = val;
+      this.fetchData();
+    },
+    handleQuery() {
+      this.queryForm.current = 1;
+      this.fetchData();
+    },
+    async fetchData() {
+      this.listLoading = true;
+      const result = await API.prod_list(this.queryForm);
+      const { records, total } = result.result;
+      this.list = records;
+      this.total = total;
+      this.listLoading = false;
+    },
+    async handleClick(row) {
+      console.log(row, "我知道");
+      let { appNo, status } = row;
+      status = status === "1" ? "2" : "1";
+      this.$confirm(`此操作将变更该产品状态, 是否继续?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(async () => {
+        const result = await API.prod_switch_upDown({
+          appNo,
+          status
+        });
+
+        if (result.success) {
+          this.$message.success("操作成功");
+          await this.fetchData();
+        }
+
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.page-fence {
+  ::v-deep {
+    i {
+      cursor: pointer;
+    }
+  }
+
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>
+<style lang="scss">
+.custom-table-checkbox {
+  .el-checkbox {
+    display: block !important;
+    margin: 0 0 $base-padding/4 0;
+  }
+}
+
+.action-bar {
+  margin-bottom: 15px;
+}
+</style>

src/views/loan/index.scss

+.merchant-new{
+  box-sizing: border-box;
+  padding: 20px;
+}
+.form-item{
+  width:500px;
+  margin-bottom: 24px !important;
+}
+
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+.avatar {
+  width: 120px;
+  height: 120px;
+  display: block;
+}
+
+//.el-input{
+//  width:200px;
+//}

src/views/loan/list.vue

+<template>
+  <div class="page-fence">
+    <!--搜索-->
+    <div class="search">
+      <el-form
+        label-suffix=":"
+        :inline="true"
+        :model="queryForm"
+        class="form-inline"
+      >
+        <el-form-item label="订单编号">
+          <el-input
+            v-model="queryForm.orderNo"
+            clearable
+            placeholder="请输入机构编号"
+          />
+        </el-form-item>
+        <el-form-item label="用户姓名">
+          <el-input
+            v-model="queryForm.tenantNo"
+            clearable
+            placeholder="请输入机构名称"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >
+            查询
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!--表格-->
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      border
+      :data="list"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :sortable="item.sortable"
+        :width="item.width"
+        :fixed="!!item.fixed"
+        :show-overflow-tooltip="!!item.overflow"
+      >
+        <template #default="{ row }">
+          <div v-if="item.label==='LOGO'">
+            <el-image
+              style="width: 50px; height: 35px"
+              :src="row[item.prop]"
+              fit="fit"
+            />
+          </div>
+          <div v-else-if="item.label==='产品状态'">
+            <span>{{ row[item.prop]==="1"?'启用':'禁用' }}</span>
+          </div>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        fixed="right"
+        align="center"
+        label="操作"
+      >
+        <template #default="{ row }">
+          <el-button
+            type="text"
+            @click="handleView(row)"
+          >
+            推送
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import { doDelete, getList } from "@/api/table";
+import API from "@/server/api";
+
+export default {
+  name: "Fence",
+  data() {
+    return {
+      checkList: ["订单编号", "进件时间","姓名", "产品名称", "申请状态", "是否推送"],
+      columns: [
+        {
+          order: 1,
+          label: "订单编号",
+          prop: "orderNo"
+        },
+        {
+          order: 2,
+          label: "进件时间",
+          prop: "gmtCreatedStr"
+        },
+        {
+          order: 3,
+          label: "姓名",
+          prop: "userName"
+        },
+        {
+          order: 4,
+          label: "产品名称",
+          prop: "appName"
+        },
+        {
+          order: 5,
+          label: "申请状态",
+          prop: "applyStatusStr"
+        },
+        {
+          order: 6,
+          label: "是否推送",
+          prop: "applyStatusStr"
+        }
+      ],
+      list: [],
+      listLoading: true,
+      layout: "total, sizes, prev, pager, next, jumper",
+      total: 0,
+      queryForm: {
+        current: 1,
+        size: 10,
+        orderNo: ""
+      }
+    };
+  },
+  computed: {
+    finallyColumns() {
+      let finallyArray = [];
+      this.checkList.forEach((checkItem) => {
+        finallyArray.push(
+          this.columns.filter((item) => item.label === checkItem)[0]
+        );
+      });
+      //return _.sortBy(finallyArray, (item) => item.order);
+      return finallyArray;
+    }
+  },
+  created() {
+    //防止三级以上路由时多次走created
+    if (this.$route.name === this.$options.name) this.fetchData();
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    onSubmit() {
+      this.fetchData();
+    },
+    handleView(row) {
+      const {appNo} = row;
+      this.$router.push({
+        path: '/prod/edit',
+        query: { appNo }
+      })
+    },
+    handleSizeChange(val) {
+      this.queryForm.size = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.queryForm.current = val;
+      this.fetchData();
+    },
+    handleQuery() {
+      this.queryForm.current = 1;
+      this.fetchData();
+    },
+    async fetchData() {
+      this.listLoading = true;
+      const result = await API.apply_list(this.queryForm);
+      const { records, total } = result.result;
+      this.list = records;
+      this.total = total;
+      this.listLoading = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.page-fence {
+  ::v-deep {
+    i {
+      cursor: pointer;
+    }
+  }
+
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>
+<style lang="scss">
+.custom-table-checkbox {
+  .el-checkbox {
+    display: block !important;
+    margin: 0 0 $base-padding/4 0;
+  }
+}
+
+.action-bar {
+  margin-bottom: 15px;
+}
+</style>

src/views/setting/departmentManagement/components/DepartmentManagementEdit.vue

+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="500px"
+    @close="close"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="父节点" prop="parentName">
+        <el-select
+          v-model="form.parentId"
+          :disabled="!form.parentId"
+          placeholder="请选择父节点"
+        >
+          <el-option
+            :value="form.parentId"
+            :label="form.parentName"
+            style="height: auto; padding: 0"
+          >
+            <el-tree
+              ref="tree"
+              :data="treeData"
+              :props="defaultProps"
+              default-expand-all
+              @node-click="handleNodeClick"
+            ></el-tree>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="order">
+        <el-input v-model="form.order"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { getList } from '@/api/departmentManagement'
+  import { doEdit } from '@/api/departmentManagement'
+
+  export default {
+    name: 'DepartmentManagementEdit',
+    data() {
+      return {
+        treeData: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+        },
+        form: {
+          parentName: '',
+          parentId: '',
+        },
+        rules: {
+          parentName: [
+            { required: true, trigger: 'blur', message: '请选择父节点' },
+          ],
+          name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
+          order: [{ required: true, trigger: 'blur', message: '请输入排序' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      async fetchData() {
+        const { data } = await getList()
+        this.treeData = data
+      },
+      handleNodeClick(node) {
+        this.form.parentName = node.name
+        this.form.parentId = node.id
+      },
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/setting/departmentManagement/index.vue

+<template>
+  <div class="departmentManagement-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+          添加
+        </el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
+          批量删除
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input
+              v-model.trim="queryForm.name"
+              placeholder="请输入名称"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      :tree-props="{ children: 'children' }"
+      default-expand-all
+      row-key="id"
+      @selection-change="setSelectRows"
+    >
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        type="selection"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        prop="name"
+        label="名称"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        prop="parentId"
+        label="父节点Id"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        prop="order"
+        label="排序"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        prop="createTime"
+        label="创建时间"
+      ></el-table-column>
+      <el-table-column align="center" label="操作" width="85">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button
+            :disabled="!row.parentId"
+            type="text"
+            @click="handleDelete({ row })"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :page-size="queryForm.pageSize"
+      :layout="layout"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    ></el-pagination>
+    <edit ref="edit" @fetch-data="fetchData"></edit>
+  </div>
+</template>
+
+<script>
+  import { getList, doDelete } from '@/api/departmentManagement'
+  import Edit from './components/DepartmentManagementEdit'
+
+  export default {
+    name: 'DepartmentManagement',
+    components: { Edit },
+    data() {
+      return {
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          title: '',
+        },
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            await this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids })
+              this.$baseMessage(msg, 'success')
+              await this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, totalCount } = await getList(this.queryForm)
+        this.list = data
+        this.total = totalCount
+        this.listLoading = false
+      },
+    },
+  }
+</script>

src/views/setting/menuManagement/components/MenuManagementEdit.vue

+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="60%"
+    @close="close"
+  >
+    <el-divider content-position="left">
+      这里就不具体写了，请自行完善
+    </el-divider>
+    <el-form
+      ref="form"
+      :inline="true"
+      :model="form"
+      :rules="rules"
+      label-width="140px"
+    >
+      <el-form-item label="name" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="路径" prop="path">
+        <el-input v-model="form.path"></el-input>
+      </el-form-item>
+      <el-form-item label="vue文件路径" prop="component">
+        <el-input v-model="form.component"></el-input>
+      </el-form-item>
+      <el-form-item label="重定向" prop="redirect">
+        <el-input v-model="form.redirect"></el-input>
+      </el-form-item>
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="form.meta.title"></el-input>
+      </el-form-item>
+      <el-form-item label="图标" prop="remixIcon">
+        <el-popover
+          popper-class="icon-selector-popper"
+          width="292"
+          trigger="hover"
+        >
+          <el-input slot="reference" v-model="form.meta.remixIcon"></el-input>
+          <icon-table @handle-icon="handleIcon"></icon-table>
+        </el-popover>
+      </el-form-item>
+      <el-form-item label="badge" prop="badge">
+        <el-input v-model="form.meta.badge"></el-input>
+      </el-form-item>
+      <el-form-item label="隐藏" prop="hidden">
+        <el-switch v-model="form.hidden"></el-switch>
+      </el-form-item>
+      <el-form-item label="始终显示当前节点" prop="alwaysShow">
+        <el-switch v-model="form.alwaysShow"></el-switch>
+      </el-form-item>
+      <el-form-item label="自定义svg图标" prop="isCustomSvgIcon">
+        <el-switch v-model="form.meta.isCustomSvgIcon"></el-switch>
+      </el-form-item>
+      <el-form-item label="固定" prop="affix">
+        <el-switch v-model="form.meta.affix"></el-switch>
+      </el-form-item>
+      <el-form-item label="无缓存" prop="noKeepAlive">
+        <el-switch v-model="form.meta.noKeepAlive"></el-switch>
+      </el-form-item>
+      <el-form-item label="不显示多标签页" prop="tagHidden">
+        <el-switch v-model="form.meta.tagHidden"></el-switch>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import IconTable from '@/extra/VabIconSelector'
+  import { doEdit } from '@/api/menuManagement'
+
+  export default {
+    name: 'MenuManagementEdit',
+    components: { IconTable },
+    data() {
+      return {
+        form: {
+          meta: {
+            remixIcon: '',
+          },
+        },
+        rules: {
+          name: [{ required: true, trigger: 'blur', message: '请输入name' }],
+          path: [{ required: true, trigger: 'blur', message: '请输入path' }],
+          component: [
+            { required: true, trigger: 'blur', message: '请输入component' },
+          ],
+          'meta.title': [
+            { required: true, trigger: 'blur', message: '请输入标题' },
+          ],
+          'meta.remixIcon': [
+            { required: true, trigger: 'blur', message: '请选择图标' },
+          ],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      handleIcon(item) {
+        this.form.meta.remixIcon = item
+      },
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/setting/menuManagement/index.vue

+<template>
+  <div class="menuManagement-container">
+    <el-divider content-position="left">
+      演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与角色权限控制
+    </el-divider>
+    <el-row>
+      <el-col :lg="4" :md="8" :sm="24" :xl="4" :xs="24">
+        <el-tree
+          :data="data"
+          :default-expanded-keys="['root']"
+          :props="defaultProps"
+          node-key="id"
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </el-col>
+      <el-col :lg="20" :md="16" :sm="24" :xl="20" :xs="24">
+        <vab-query-form>
+          <vab-query-form-top-panel :span="12">
+            <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+              添加
+            </el-button>
+          </vab-query-form-top-panel>
+        </vab-query-form>
+        <el-table
+          v-loading="listLoading"
+          :data="list"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          border
+          default-expand-all
+          row-key="path"
+        >
+          <el-table-column align="center" label="序号" width="55">
+            <template #default="{ $index }">
+              {{ $index + 1 }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="name"
+            prop="name"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="路径"
+            prop="path"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="是否隐藏"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span>
+                {{ row.hidden ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="是否一直显示当前节点"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span>
+                {{ row.alwaysShow ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="vue文件路径"
+            prop="component"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="重定向"
+            prop="redirect"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="标题"
+            prop="meta.title"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column align="center" label="图标" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                <vab-remix-icon
+                  v-if="row.meta.remixIcon"
+                  :icon-class="row.meta.remixIcon"
+                ></vab-remix-icon>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="是否固定"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.affix ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="是否无缓存"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.noKeepAlive ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="badge" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.badge }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="操作"
+            show-overflow-tooltip
+            width="85"
+          >
+            <template #default="{ row }">
+              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+              <el-button type="text" @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <edit ref="edit" @fetch-data="fetchData"></edit>
+  </div>
+</template>
+
+<script>
+  import { getRouterList as getList } from '@/api/router'
+  import { doDelete, getTree } from '@/api/menuManagement'
+  import Edit from './components/MenuManagementEdit'
+
+  export default {
+    name: 'MenuManagement',
+    components: { Edit },
+    data() {
+      return {
+        data: [],
+        defaultProps: {
+          children: 'children',
+          label: 'label',
+        },
+        list: [],
+        listLoading: true,
+      }
+    },
+    async created() {
+      const roleData = await getTree()
+      this.data = roleData.data
+      await this.fetchData()
+    },
+    methods: {
+      handleEdit(row) {
+        if (row.path && row.component) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.path) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ paths: row.path })
+            this.$baseMessage(msg, 'success')
+            await this.fetchData()
+          })
+        }
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getList()
+        this.list = data
+        this.listLoading = false
+      },
+      handleNodeClick() {
+        this.fetchData()
+      },
+    },
+  }
+</script>

src/views/setting/roleManagement/components/RoleManagementEdit.vue

+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="500px"
+    @close="close"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="角色码" prop="role">
+        <el-input v-model="form.role"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/roleManagement'
+
+  export default {
+    name: 'RoleManagementEdit',
+    data() {
+      return {
+        form: {},
+        rules: {
+          role: [{ required: true, trigger: 'blur', message: '请输入角色码' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/setting/roleManagement/index.vue

+<template>
+  <div class="roleManagement-container">
+    <el-divider content-position="left">
+      演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与角色权限控制
+    </el-divider>
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+          添加
+        </el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
+          批量删除
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input
+              v-model.trim="queryForm.role"
+              clearable
+              placeholder="请输入角色"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      @selection-change="setSelectRows"
+    >
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        type="selection"
+      ></el-table-column>
+      <el-table-column align="center" label="序号" width="55">
+        <template #default="{ $index }">
+          {{ $index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="id"
+        prop="id"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="角色码"
+        prop="role"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="操作"
+        show-overflow-tooltip
+        width="85"
+      >
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    ></el-pagination>
+    <edit ref="edit" @fetch-data="fetchData"></edit>
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList } from '@/api/roleManagement'
+  import Edit from './components/RoleManagementEdit'
+
+  export default {
+    name: 'RoleManagement',
+    components: { Edit },
+    data() {
+      return {
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          role: '',
+        },
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            await this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids })
+              this.$baseMessage(msg, 'success')
+              await this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, totalCount } = await getList(this.queryForm)
+        this.list = data
+        this.total = totalCount
+        this.listLoading = false
+      },
+    },
+  }
+</script>

src/views/setting/userManagement/components/UserManagementEdit.vue

+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="500px"
+    @close="close"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model.trim="form.username"></el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model.trim="form.password" type="password"></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model.trim="form.email"></el-input>
+      </el-form-item>
+      <el-form-item label="角色" prop="roles">
+        <el-checkbox-group v-model="form.roles">
+          <el-checkbox label="admin"></el-checkbox>
+          <el-checkbox label="editor"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/userManagement'
+
+  export default {
+    name: 'UserManagementEdit',
+    data() {
+      return {
+        form: {
+          roles: [],
+        },
+        rules: {
+          username: [
+            { required: true, trigger: 'blur', message: '请输入用户名' },
+          ],
+          password: [
+            { required: true, trigger: 'blur', message: '请输入密码' },
+          ],
+          email: [{ required: true, trigger: 'blur', message: '请输入邮箱' }],
+          roles: [{ required: true, trigger: 'blur', message: '请选择角色' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/setting/userManagement/index.vue

+<template>
+  <div class="userManagement-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+          添加
+        </el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
+          批量删除
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input
+              v-model.trim="queryForm.username"
+              clearable
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      @selection-change="setSelectRows"
+    >
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        type="selection"
+      ></el-table-column>
+      <el-table-column align="center" label="序号" width="55">
+        <template #default="{ $index }">
+          {{ $index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="id"
+        prop="id"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="用户名"
+        prop="username"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="邮箱"
+        prop="email"
+        show-overflow-tooltip
+      ></el-table-column>
+
+      <el-table-column align="center" label="角色" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-tag v-for="(item, index) in row.roles" :key="index">
+            {{ item }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        align="center"
+        label="修改时间"
+        prop="datatime"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="操作"
+        show-overflow-tooltip
+        width="85"
+      >
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    ></el-pagination>
+    <edit ref="edit" @fetch-data="fetchData"></edit>
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList } from '@/api/userManagement'
+  import Edit from './components/UserManagementEdit'
+
+  export default {
+    name: 'UserManagement',
+    components: { Edit },
+    data() {
+      return {
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          username: '',
+        },
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            await this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids })
+              this.$baseMessage(msg, 'success')
+              await this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, totalCount } = await getList(this.queryForm)
+        this.list = data
+        this.total = totalCount
+        this.listLoading = false
+      },
+    },
+  }
+</script>