应用用户和模块

src/assets/styles/base.scss

@@ -372,10 +372,10 @@ body {
 }
 .btn-primary {
   &.el-button--text:not(.is-disabled) {
-    color: $--color-text-dark-1 !important;
+    color: $--color-primary !important;
     &:hover {
       font-weight: 600;
-      color: $--color-primary !important;
+      color: mix(#000, $--color-primary, 20%) !important;
     }
   }
 }

src/assets/styles/element-ui-costom.scss

@@ -72,6 +72,24 @@
   }
 }
 
+.page-dialog {
+  .el-dialog.is-fullscreen {
+    background: $--color-background;
+    .el-dialog__body {
+      padding: 70px 20px 20px;
+    }
+  }
+  .el-dialog {
+    background: $--color-background;
+    .el-dialog__body {
+      padding: 20px;
+    }
+    .el-dialog__footer {
+      display: none;
+    }
+  }
+}
+
 // .opacity-dialog
 .opacity-dialog {
   .el-dialog {
@@ -231,7 +249,6 @@
 .el-button--small {
   padding-top: 8px;
   padding-bottom: 8px;
-  font-size: 12px;
 }
 .el-button--text {
   color: $--color-text-gray-2;
@@ -334,6 +351,7 @@
       margin: 0 5px;
       border: none !important;
       outline: none !important;
+      font-size: 14px;
       &:hover {
         transform: scale(1.1);
       }

src/modules/admin/api.js

@@ -1,11 +1,32 @@
 import { $get, $post, $postParam } from "@/plugins/axios";
 
 // common-select
-export const appTypeList = datas => {
-  return $get("/api/admin/app/types", datas);
+// export const appTypeList = datas => {
+//   return $get("/api/admin/app/types", datas);
+// };
+// export const appDeployList = datas => {
+//   return $get("/api/admin/app/deploy_modes", datas);
+// };
+
+// user-manage
+export const userListPage = datas => {
+  return $postParam("/api/admin/user/query", datas);
+};
+export const userRoleList = datas => {
+  return $postParam("/api/admin/user/roles", datas);
+};
+export const userListQuery = datas => {
+  return $postParam("/api/admin/user/list", datas);
+};
+export const resetPwd = password => {
+  return $postParam("/api/admin/user/change_password", { password });
 };
-export const appDeployList = datas => {
-  return $get("/api/admin/app/deploy_modes", datas);
+export const userInsertOrUpdate = datas => {
+  if (datas.id) {
+    return $post("/api/admin/user/update", datas);
+  } else {
+    return $post("/api/admin/user/insert", datas);
+  }
 };
 
 // app-manage
@@ -19,57 +40,29 @@ export const appInsertOrUpdate = datas => {
     return $post("/api/admin/app/insert", datas);
   }
 };
-export const appBindOrg = datas => {
-  return $postParam("/api/admin/app/bind_org", datas);
-};
-export const appResetSecret = id => {
-  return $postParam("/api/admin/app/reset_secret", { id });
-};
-export const appControlKeys = () => {
-  return $get("/api/admin/app/control_keys", {});
-};
-export const appLicenseDownload = ({ appId, deviceId }) => {
-  return $postParam(
-    "/api/admin/app/license/download",
-    { appId, deviceId },
-    { responseType: "blob" }
-  );
+// app-user-manage
+export const appUserList = appId => {
+  return $postParam("/api/admin/app/user/list", { id: appId });
 };
-// app-devive manage
-export const appDeviceList = appId => {
-  return $postParam("/api/admin/app/device/list", { appId });
-};
-export const appDeviceInfo = deviceId => {
-  return $postParam("/api/admin/app/device/info", { deviceId });
-};
-export const appDeviceSave = datas => {
-  let formData = new FormData();
-  Object.keys(datas).forEach(key => {
-    formData.append(key, datas[key]);
-  });
-  return $post("/api/admin/app/device/save", formData);
-};
-export const appDeviceDelete = ({ appId, deviceId }) => {
-  return $postParam("/api/admin/app/device/delete", { appId, deviceId });
+export const appBindUser = ({ appId, userId }, isBind) => {
+  if (isBind) {
+    return $postParam("/api/admin/app/user/bind", { id: appId, userId });
+  } else {
+    return $postParam("/api/admin/app/user/unbind", { id: appId, userId });
+  }
 };
 
-// user-manage
-export const userListPage = datas => {
-  return $postParam("/api/admin/user/query", datas);
-};
-export const userRoleList = datas => {
-  return $postParam("/api/admin/user/roles", datas);
+// app-module-manage
+export const appModuleList = datas => {
+  return $postParam("/api/admin/module/list", datas);
 };
-export const userListQuery = datas => {
-  return $postParam("/api/admin/user/list", datas);
-};
-export const resetPwd = password => {
-  return $postParam("/api/admin/user/change_password", { password });
-};
-export const userInsertOrUpdate = datas => {
+export const appModuleInsertOrUpdate = datas => {
   if (datas.id) {
-    return $post("/api/admin/user/update", datas);
+    return $post("/api/admin/module/update", datas);
   } else {
-    return $post("/api/admin/user/insert", datas);
+    return $post("/api/admin/module/insert", datas);
   }
 };
+export const appModuleEnable = ({ id, enable }) => {
+  return $post("/api/admin/module/update", { id, enable });
+};

src/modules/admin/components/AppModuleManage.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="app-module-manage">
+    <el-dialog
+      class="page-dialog"
+      :visible.sync="modalIsShow"
+      title="应用模块管理"
+      top="10px"
+      width="1000px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @opened="visibleChange"
+    >
+      <div class="part-box part-box-filter part-box-flex">
+        <el-form
+          ref="FilterForm"
+          label-position="left"
+          label-width="80px"
+          inline
+        >
+          <el-form-item label="编码">
+            <el-input
+              v-model="filter.code"
+              placeholder="编码"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="是否启用">
+            <el-select v-model="filter.enable" placeholder="是否启用" clearable>
+              <el-option
+                v-for="(val, key) in ABLE_TYPE"
+                :key="key"
+                :value="val"
+                :label="val"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label-width="0px">
+            <el-button type="primary" icon="ios-search" @click="toPage(1)"
+              >查询</el-button
+            >
+            <el-button type="success" icon="md-add" @click="toAdd"
+              >新增</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="part-box part-box-pad">
+        <el-table ref="TableList" :data="dataList">
+          <el-table-column prop="id" label="ID" width="80"></el-table-column>
+          <el-table-column prop="name" label="名称"> </el-table-column>
+          <el-table-column prop="code" label="编码"> </el-table-column>
+          <el-table-column prop="enable" label="状态" width="80">
+            <template slot-scope="scope">
+              {{ scope.row.enable | ableTypeFilter }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" width="170">
+            <span slot-scope="scope">{{
+              scope.row.createTime | timestampFilter
+            }}</span>
+          </el-table-column>
+          <el-table-column prop="updateTime" label="修改时间" width="170">
+            <span slot-scope="scope">{{
+              scope.row.updateTime | timestampFilter
+            }}</span>
+          </el-table-column>
+          <el-table-column label="操作" width="100" class-name="action-column">
+            <template slot-scope="scope">
+              <el-button
+                class="btn-primary"
+                type="text"
+                @click="toEdit(scope.row)"
+                >编辑</el-button
+              >
+              <el-button
+                :class="scope.row.enable ? 'btn-danger' : 'btn-primary'"
+                type="text"
+                @click="toEnable(scope.row)"
+                >{{ scope.row.enable ? "禁用" : "启用" }}</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="part-page">
+          <el-pagination
+            background
+            layout="total,prev, pager, next"
+            :current-page="current"
+            :total="total"
+            :page-size="size"
+            @current-change="toPage"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- ModifyAppModule -->
+    <modify-app-module
+      ref="ModifyAppModule"
+      :instance="curRow"
+      @modified="getList"
+    ></modify-app-module>
+  </div>
+</template>
+
+<script>
+import { appModuleList, appModuleEnable } from "../api";
+import { ABLE_TYPE } from "../../../constants/enumerate";
+import ModifyAppModule from "../components/ModifyAppModule.vue";
+
+export default {
+  name: "app-module-manage",
+  components: { ModifyAppModule },
+  props: {
+    app: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      ABLE_TYPE,
+      filter: {
+        enable: null,
+        code: ""
+      },
+      current: 1,
+      size: this.GLOBAL.pageSize,
+      total: 0,
+      dataList: [],
+      curRow: {}
+    };
+  },
+  methods: {
+    visibleChange() {
+      // this.toPage(1);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async getList() {
+      const datas = {
+        ...this.filter,
+        appId: this.app.id,
+        pageNumber: this.current,
+        pageSize: this.size
+      };
+      if (datas.enable !== null && datas.enable !== "")
+        datas.enable = !!datas.enable;
+      const data = await appModuleList(datas);
+      this.dataList = data.records;
+      this.total = data.total;
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    toAdd() {
+      this.curRow = { appId: this.app.id };
+      this.$refs.ModifyAppModule.open();
+    },
+    toEdit(row) {
+      this.curRow = { ...row, appId: this.app.id };
+      this.$refs.ModifyAppModule.open();
+    },
+    toEnable(row) {
+      const action = row.enable ? "禁用" : "启用";
+      this.$confirm(`确定要${action}模块【${row.name}】吗?`, "提示", {
+        type: "warning"
+      })
+        .then(async () => {
+          const enable = !row.enable;
+          await appModuleEnable({
+            id: row.id,
+            enable
+          });
+          row.enable = enable;
+          this.$message.success("操作成功！");
+        })
+        .catch(() => {});
+    }
+  }
+};
+</script>

src/modules/admin/components/AppUserManage.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="app-user-manage">
+    <el-dialog
+      class="page-dialog"
+      :visible.sync="modalIsShow"
+      title="应用绑定用户"
+      top="10px"
+      width="900px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @opened="visibleChange"
+    >
+      <div class="part-box part-box-filter part-box-flex">
+        <el-form ref="FilterForm" label-position="left" inline>
+          <el-form-item label="登录名前缀：">
+            <el-input
+              style="width: 180px;"
+              v-model.trim="filter.loginNameStartWith"
+              placeholder="登录名前缀"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="角色：">
+            <el-select
+              v-model="filter.role"
+              style="width: 142px;"
+              placeholder="角色"
+              filterable
+              clearable
+            >
+              <el-option
+                v-for="item in roles"
+                :key="item.code"
+                :value="item.code"
+                :label="item.name"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label-width="0px">
+            <el-button type="primary" @click="toPage(1)">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="part-box part-box-pad">
+        <el-table ref="TableList" :data="users">
+          <el-table-column prop="id" label="ID" width="80"></el-table-column>
+          <el-table-column prop="loginName" label="用户名"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="roles" label="角色" min-width="120">
+            <template slot-scope="scope">
+              {{ scope.row.roles | rolesFilter }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="80">
+            <template slot-scope="scope">
+              <span v-if="scope.row.isBind" class="color-primary">已绑定</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column class-name="action-column" label="操作" width="80">
+            <template slot-scope="scope">
+              <el-button
+                :class="scope.row.isBind ? 'btn-danger' : 'btn-primary'"
+                type="text"
+                @click="toBind(scope.row)"
+                >{{ scope.row.isBind ? "解绑" : "绑定" }}</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="part-page">
+          <el-pagination
+            background
+            layout="total,prev, pager, next"
+            :current-page="current"
+            :total="total"
+            :page-size="size"
+            @current-change="toPage"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { appUserList, appBindUser, userRoleList, userListPage } from "../api";
+
+export default {
+  name: "app-user-manage",
+  props: {
+    app: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  filters: {
+    rolesFilter(val) {
+      return val.map(code => this.roleType[code]).join("，");
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      filter: {
+        loginNameStartWith: "",
+        role: ""
+      },
+      current: 1,
+      size: this.GLOBAL.pageSize,
+      total: 0,
+      roles: [],
+      roleType: {},
+      users: [],
+      curUser: {},
+      bindUserIds: []
+    };
+  },
+  created() {
+    // this.getRoleList();
+  },
+  methods: {
+    async visibleChange() {
+      // await this.getBindUser();
+      // this.toPage(1);
+    },
+    async getBindUser() {
+      const res = await appUserList(this.app.id);
+      this.bindUserIds = res ? res.map(item => item.userId) : [];
+    },
+    async getRoleList() {
+      const data = await userRoleList();
+      this.roles = data || [];
+      let roleType = {};
+      this.roles.forEach(item => {
+        roleType[item.code] = item.name;
+      });
+      this.roleType = roleType;
+    },
+    async getList() {
+      const datas = {
+        ...this.filter,
+        pageNumber: this.current,
+        pageSize: this.size
+      };
+      const data = await userListPage(datas);
+      this.dataList = data.records.map(item => {
+        item.isBind = this.bindUserIds.includes(item.id);
+        return item;
+      });
+      this.total = data.total;
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async toBind(row) {
+      await appBindUser(
+        {
+          appId: this.app.id,
+          userId: row.id
+        },
+        !row.isBind
+      );
+      this.$message.success("操作成功！");
+      row.isBind = !row.isBind;
+      await this.getBindUser();
+    }
+  }
+};
+</script>

src/modules/admin/components/ModifyAppModule.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    class="modify-app"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10px"
+    width="540px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      :key="modalForm.id"
+      label-width="110px"
+    >
+      <el-form-item prop="name" label="名称">
+        <el-input
+          v-model.trim="modalForm.name"
+          placeholder="请输入名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="code" label="编码">
+        <el-input
+          v-model.trim="modalForm.code"
+          placeholder="请输入编码"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="danger" @click="cancel" plain>取消</el-button>
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { appModuleInsertOrUpdate } from "../api";
+
+const initModalForm = {
+  id: "",
+  appId: null,
+  name: "",
+  code: ""
+};
+
+export default {
+  name: "modify-app-module",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.instance.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "应用模块";
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入名称",
+            trigger: "change"
+          },
+          {
+            max: 50,
+            message: "名称不能超过50",
+            trigger: "change"
+          }
+        ],
+        code: [
+          {
+            required: true,
+            message: "请输入编码",
+            trigger: "change"
+          },
+          {
+            max: 50,
+            message: "编码不能超过50",
+            trigger: "change"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    initData(val) {
+      this.modalForm = this.$objAssign(initModalForm, val);
+      this.$refs.modalFormComp.clearValidate();
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate();
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      let datas = { ...this.modalForm };
+      const data = await appModuleInsertOrUpdate(datas).catch(() => {});
+      this.isSubmit = false;
+
+      if (!data) return;
+
+      this.$message.success(this.title + "成功！");
+      this.$emit("modified");
+      this.cancel();
+    }
+  }
+};
+</script>

src/modules/admin/views/AppManage.vue

@@ -27,11 +27,15 @@
         <el-table-column prop="id" label="ID" width="80"></el-table-column>
         <el-table-column prop="name" label="名称"> </el-table-column>
         <el-table-column prop="code" label="编码"> </el-table-column>
-        <el-table-column prop="masterVersionName" label="版本号">
+        <el-table-column
+          prop="masterVersionName"
+          label="主干版本"
+          class-name="action-column"
+        >
           <template slot-scope="scope">
             <el-button
-              size="mini"
-              type="primary"
+              class="btn-primary"
+              type="text"
               title="切换主干版本"
               @click="toSwithMasterVersion(scope.row)"
               >{{ scope.row.masterVersionName }}</el-button
@@ -48,13 +52,56 @@
             scope.row.updateTime | timestampFilter
           }}</span>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="260">
+        <el-table-column label="操作" width="80" class-name="action-column">
           <template slot-scope="scope">
-            <el-button size="mini" type="primary" @click="toEdit(scope.row)"
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEdit(scope.row)"
               >编辑</el-button
             >
           </template>
         </el-table-column>
+        <el-table-column label="管理" width="300" class-name="action-column">
+          <template slot-scope="scope">
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEditUser(scope.row)"
+              >用户</el-button
+            >
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEditModule(scope.row)"
+              >模块</el-button
+            >
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEditVersion(scope.row)"
+              >版本</el-button
+            >
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEditEnv(scope.row)"
+              >环境</el-button
+            >
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEditBaseline(scope.row)"
+              >配置基线</el-button
+            >
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEditConfig(scope.row)"
+              >配置</el-button
+            >
+          </template>
+        </el-table-column>
       </el-table>
       <div class="part-page">
         <el-pagination
@@ -70,27 +117,44 @@
     </div>
 
     <!-- modify-app -->
-    <ModifyApp :instance="curRow" @modified="getList" ref="ModifyApp" />
+    <modify-app ref="ModifyApp" :instance="curRow" @modified="getList">
+    </modify-app>
+    <!-- AppUserManage -->
+    <app-user-manage ref="AppUserManage" :app="curRow"></app-user-manage>
+    <!-- AppModuleManage -->
+    <app-module-manage ref="AppModuleManage" :app="curRow"></app-module-manage>
   </div>
 </template>
 
 <script>
 import { appQuery } from "../api";
 import ModifyApp from "../components/ModifyApp";
+import AppUserManage from "../components/AppUserManage.vue";
+import AppModuleManage from "../components/AppModuleManage.vue";
 
 export default {
   name: "app-manage",
-  components: { ModifyApp },
+  components: { ModifyApp, AppUserManage, AppModuleManage },
   data() {
     return {
       filter: {
         nameStartWith: "",
-        type: ""
+        code: ""
       },
       current: 1,
       size: this.GLOBAL.pageSize,
       total: 0,
-      dataList: [],
+      dataList: [
+        {
+          id: "1",
+          name: "应用1",
+          code: "app1",
+          masterVersionName: "1.0.0",
+          masterVersionId: "11",
+          createTime: Date.now(),
+          updateTime: Date.now()
+        }
+      ],
       curRow: {},
       loading: false
     };
@@ -124,7 +188,29 @@ export default {
       this.curRow = row;
       this.$refs.ModifyApp.open();
     },
-    toSwithMasterVersion(row) {}
+    toSwithMasterVersion(row) {
+      console.log(row);
+    },
+    toEditUser(row) {
+      this.curRow = row;
+      this.$refs.AppUserManage.open();
+    },
+    toEditModule(row) {
+      this.curRow = row;
+      this.$refs.AppModuleManage.open();
+    },
+    toEditVersion(row) {
+      console.log(row);
+    },
+    toEditEnv(row) {
+      console.log(row);
+    },
+    toEditBaseline(row) {
+      console.log(row);
+    },
+    toEditConfig(row) {
+      console.log(row);
+    }
   }
 };
 </script>

src/modules/admin/views/UserManage.vue

@@ -38,7 +38,7 @@
       <el-table ref="TableList" :data="users">
         <el-table-column prop="id" label="ID" width="80"></el-table-column>
         <el-table-column prop="loginName" label="用户名"></el-table-column>
-        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
+        <el-table-column prop="name" label="姓名"></el-table-column>
         <el-table-column prop="roles" label="角色">
           <template slot-scope="scope">
             {{ scope.row.roles | rolesFilter }}