fl-web-component 0.1.0

package/packages/components/model/components/proof-project-user.vue

@@ -0,0 +1,482 @@
+<template>
+  <div>
+    <div class="trigger-button">
+      <el-button type="text" @click="triggerDialog"
+        ><i class="pre-img"></i>用户列表</el-button
+      >
+    </div>
+    <com-dialog
+      v-if="dialogVisible"
+      dialog-title="项目用户管理"
+      :visible="dialogVisible"
+      :popup-width="'50%'"
+      :footerDisabled="true"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="small"
+            @click="handleAdd"
+            v-hasPermi="[
+              `project:user:add:proj:${defaultParams.projectId}`,
+            ]"
+            >新增</el-button
+          >
+        </el-col>
+      </el-row>
+
+      <el-table
+        max-height="65vh"
+        v-loading="loading"
+        :data="tableData"
+      >
+        <el-table-column label="序号" type="index" width="80" />
+        <el-table-column
+          label="项目用户"
+          prop="userName"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="项目角色"
+          prop="roleName"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="操作"
+          width="200"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleEdit(scope.row)"
+              v-if="!scope.row.projectManager"
+              v-hasPermi="[
+                `project:user:edit:proj:${defaultParams.projectId}`,
+              ]"
+              >修改</el-button
+            >
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleDelete(scope.row)"
+              v-if="!scope.row.projectManager"
+              v-hasPermi="[
+                `project:user:remove:proj:${defaultParams.projectId}`,
+              ]"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </com-dialog>
+
+    <com-dialog
+      v-if="dialogOperate.visible"
+      dialog-title="项目用户"
+      :visible="dialogOperate.visible"
+      :popup-width="'25%'"
+      @handleClose="handleOperateClose"
+      @submitDialogData="submitDialogOperateData"
+    >
+      <el-form ref="formOperate" :model="dialogForm" :rules="formRules" label-width="100px">
+        <el-form-item
+          label="项目用户"
+          prop="userId"
+          v-if="dialogForm.operateType != 'edit'"
+        >
+          <el-select v-model="dialogForm.userId" placeholder="请选择">
+            <el-option
+              v-for="item in unallocatedUserList"
+              :key="item.id"
+              :label="item.value"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目角色" prop="roleId">
+          <el-select v-model="dialogForm.roleId" placeholder="请选择">
+            <el-option
+              v-for="item in roleList"
+              :key="item.id"
+              :label="item.value"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </com-dialog>
+  </div>
+</template>
+
+<script>
+import project from '@/api/projects/projects';
+
+import {
+  getUnallocatedUserList,
+  deleteProofProjectUser,
+  getProofProjectUserList,
+  getRoleList,
+  addProofProjectUser,
+  updateProofProjectUser,
+} from '../api/index';
+export default {
+  name: 'proofProjectUser',
+  data() {
+    return {
+      dialogVisible: false,
+      historyDialogVisible: false,
+      tableData: [],
+      loading: true,
+      historyVersionName: '',
+      dialogOperate: {
+        visible: false,
+      },
+      dialogForm: {
+        userId: '',
+        roleId: '',
+        type: 1,
+        operateType: '',
+      },
+      formRules: {
+        userId: [
+          { required: true, message: '请选择项目用户', trigger: 'change' },
+        ],
+        roleId: [
+          { required: true, message: '请选择项目角色', trigger: 'change' },
+        ],
+      },
+      unallocatedUserList: [],
+      roleList: [],
+    };
+  },
+  components: {
+    ComDialog: () => import('./com-dialogWrapper'),
+  },
+  mounted() {
+    const params = { projectId: this.defaultParams.projectId };
+    this.getProofProjectUserList(params);
+    this.getUnallocatedUserList(params);
+    this.getRoleList(params);
+  },
+  props: {
+    defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    projectId() {
+      return this.defaultParams.projectId;
+    },
+  },
+  methods: {
+    triggerDialog() {
+      this.dialogVisible = !this.dialogVisible;
+      console.log(this.dialogVisible);
+    },
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val;
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      this.dialogVisible = false;
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogOperateData() {
+      this.$refs.formOperate.validate((vaild) => {
+        if (vaild) {
+          this.dialogForm.projectId = this.defaultParams.projectId;
+          if (this.dialogForm.operateType != 'edit') {
+            addProofProjectUser(this.dialogForm)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message({
+                    type: 'success',
+                    message: res.msg,
+                  });
+                  this.getProofProjectUserList(this.defaultParams);
+                  this.getUnallocatedUserList(this.defaultParams);
+                } else {
+                  this.$message({
+                    type: 'error',
+                    message: res.msg,
+                  });
+                }
+              })
+              .catch((err) => {
+                // this.$message({
+                //   type: "error",
+                //   message: err.msg,
+                // });
+              })
+              .finally(() => {
+                this.dialogOperate.visible = false;
+              });
+          } else {
+            updateProofProjectUser(this.dialogForm)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message({
+                    type: 'success',
+                    message: res.msg,
+                  });
+                  this.getProofProjectUserList(this.defaultParams);
+                } else {
+                  this.$message({
+                    type: 'error',
+                    message: res.msg,
+                  });
+                }
+              })
+              .catch((err) => {
+                // this.$message({
+                //   type: "error",
+                //   message: err.msg,
+                // });
+              })
+              .finally(() => {
+                this.dialogOperate.visible = false;
+              });
+          }
+        } else {
+          console.log('error submit');
+        }
+      });
+    },
+    handleAdd() {
+      this.dialogForm.operateType = 'add';
+      this.dialogOperate.visible = true;
+      this.dialogForm.userId = '';
+      this.dialogForm.roleId = '';
+    },
+    /* 弹窗 关闭 操作 */
+    handleOperateClose() {
+      this.resetForm();
+      this.dialogOperate.visible = false;
+    },
+    getProofProjectUserList(params) {
+      project.myProject({ pageNum: 1, pageSize: 10000 }).then((response) => {
+        // this.projectList = response.rows;
+        const currentProject = response.rows.find(
+          (item) => item.id == this.defaultParams.projectId
+        );
+        getProofProjectUserList(params)
+          .then((res) => {
+            this.tableData = res.rows;
+            // this.tableData.unshift({
+            //   userName: currentProject.manager,
+            //   roleName: '负责人',
+            //   type: 'manager',
+            // });
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      });
+    },
+    resetForm() {
+      this.$refs.formOperate.resetFields();
+      this.dialogForm.userId = '';
+      this.dialogForm.roleId = '';
+      this.dialogForm.operateType = '';
+    },
+    getRoleList(params) {
+      getRoleList(params).then((res) => {
+        if (res.code == 200) {
+          let data = res.rows;
+          this.roleList = data.map((item) => {
+            return {
+              value: item.roleName,
+              id: item.roleId,
+              // value: '' + item.userId
+            };
+          });
+          console.log(this.roleList);
+        }
+      });
+    },
+    getUnallocatedUserList(params) {
+      getUnallocatedUserList(params).then((res) => {
+        if (res.code == 200) {
+          let data = res.data;
+          this.unallocatedUserList = data.map((item) => {
+            return {
+              value: item.userName,
+              id: item.userId,
+              // value: '' + item.userId
+            };
+          });
+          console.log(this.unallocatedUserList);
+        }
+      });
+    },
+    handleDelete(item) {
+      this.$confirm(`确认移除用户 "${item.userName}"？`, '移除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'error',
+      })
+        .then(() => {
+          const { userId, roleId } = item;
+          deleteProofProjectUser({
+            userId,
+            roleId,
+            projectId: this.defaultParams.projectId,
+          })
+            .then((res) => {
+              if (res.code != 200) {
+                this.$message({
+                  type: 'error',
+                  message: res.msg,
+                });
+              } else {
+                this.getProofProjectUserList(this.defaultParams);
+                this.getUnallocatedUserList(this.defaultParams);
+                this.$message({
+                  type: 'success',
+                  message: res.msg,
+                });
+              }
+            })
+            .catch((res) => {
+              this.$message({
+                type: 'error',
+                message: res.msg,
+              });
+            });
+        })
+        .catch(() => {});
+    },
+    handleEdit(item) {
+      this.dialogOperate.visible = true;
+      this.dialogForm.operateType = 'edit';
+      Object.assign(this.dialogForm, item);
+      console.log(this.dialogForm);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// .el-table{
+// 	color: #606266;
+// }
+// .el-table th{
+//   background: none;
+// }
+// .el-table tr{
+//   background: none;
+// }
+// .el-table thead{
+//   color: #fff;
+// }
+// .el-table th.el-table__cell{
+//   background: none;
+// }
+::v-deep .el-table {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  line-height: 20px;
+  color: #2e3136;
+
+  // .el-table th{
+  // 	background: none;
+  // }
+  // .el-table tr{
+  // 	background: none;
+  // }
+  // .el-table thead{
+  // 	tr{
+  // 		color: #2E3136;
+  // 	}
+  // }
+  .el-table th.el-table__cell {
+    background: none;
+  }
+  .el-table__header-wrapper {
+    flex-shrink: 0;
+  }
+  .el-table__body-wrapper {
+    flex-grow: 1;
+    .el-table__row {
+      height: 52px;
+      background-color: #fff !important;
+    }
+  }
+  .el-table__header-wrapper .el-table__header th,
+  .el-table__fixed-header-wrapper .el-table__header th {
+    background-color: #f8f8f8 !important;
+    color: #2e3136;
+    height: 52px;
+    box-sizing: border-box;
+    padding: 0;
+    font-size: 14px;
+    line-height: 20px;
+    color: #2e3136;
+  }
+
+  .el-table__fixed-body-wrapper {
+    .el-table__row {
+      height: 52px;
+    }
+  }
+
+  .el-table__body tr.hover-row {
+    td.el-table__cell {
+      background-color: #f6f9fa;
+    }
+  }
+
+  .el-table__cell:not(.is-center):not(.is-hidden) {
+    button.el-button--text {
+      color: #008de9;
+    }
+  }
+
+  // 计数器高度
+  .el-input-number .el-input--medium .el-input__inner {
+    height: 30px;
+  }
+
+  .el-dropdown-link {
+    color: #008de9;
+  }
+  // 头部多选按钮
+  thead .el-table-column--selection {
+    & .el-checkbox {
+      margin-left: 4px;
+    }
+  }
+}
+
+::v-deep .trigger-button {
+  span {
+    display: flex;
+    align-items: center;
+    color: #2e3136;
+  }
+  .pre-img {
+    background-image: url('../../../assets/proof/project_user@2x.png');
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    background-size: cover;
+  }
+}
+</style>

package/packages/components/model/components/proof-publish.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="trigger-button">
+      <el-button
+        type="text"
+        @click="triggerDialog"
+        :disabled="disabledBtn"
+        v-hasPermi="[`project:version:publish:proj:${defaultParams.projectId}`]"
+        ><i class="pre-img"></i>发布</el-button
+      >
+    </div>
+    <com-dialog
+      v-if="dialogVisible"
+      dialog-title="发布校审版本"
+      :visible="dialogVisible"
+      :popup-width="'25%'"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      <el-form ref="form" :model="dialogForm" :rules="formRules">
+        <el-form-item label="校审版本名称" prop="name">
+          <el-input v-model="dialogForm.name"></el-input>
+        </el-form-item>
+      </el-form>
+    </com-dialog>
+  </div>
+</template>
+
+<script>
+import * as modelApi from '../api/index';
+
+export default {
+  name: 'importModel',
+  data() {
+    return {
+      dialogVisible: false,
+      dialogForm: {
+        name: '',
+      },
+      formRules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+      },
+      disabledBtn: true,
+    };
+  },
+  props: {
+    defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  components: {
+    ComDialog: () => import('./com-dialogWrapper'),
+  },
+  methods: {
+    triggerDialog() {
+      this.dialogVisible = !this.dialogVisible;
+      console.log(this.dialogVisible);
+    },
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val;
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      this.$refs.form.validate((vaild) => {
+        if (vaild) {
+          this.dialogForm.projectId = this.defaultParams.projectId;
+
+          modelApi
+            .publishProofVersion(this.dialogForm)
+            .then((res) => {
+              if (res.code === 200) {
+                this.dialogVisible = false;
+                this.$message({
+                  type: 'success',
+                  message: '当前校审版本已发布',
+                });
+                this.$emit('getVersionList');
+                this.resetForm();
+
+                setTimeout(() => {
+                  this.$emit('publishVersion', null);
+                }, 1000);
+              } else {
+                this.$message({ type: 'error', message: res.msg });
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+              // this.$message({ type: 'error', message: err.msg })
+            });
+        } else {
+          console.log('error submit');
+        }
+      });
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.resetForm();
+      this.dialogVisible = false;
+    },
+    resetForm() {
+      this.$refs.form.resetFields();
+    },
+    ableBtn() {
+      this.disabledBtn = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .trigger-button {
+  span {
+    display: flex;
+    align-items: center;
+    color: #2e3136;
+  }
+  .pre-img {
+    background-image: url('../../../assets/proof/publish@2x.png');
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    background-size: cover;
+  }
+}
+</style>