公共组件 复用 文档

一、提交审核

1、按钮:

 <el-button
            v-if="scope.row.status == 1 || scope.row.status == 4"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleSubmitAudit(scope.row)"
            v-hasPermi="['system:training:submit']"
            >提交审核</el-button
          >

2、弹窗:

<!-- 提交审核开始 -->
    <el-dialog
      title="提交审核"
      :visible.sync="submitAudit"
      width="600px"
      append-to-body
    >
      <el-row>
        <div class="content-border every-content" style="height: 54vh">
          <submit-audit
            ref="submitAudit"
            :id="id"
            :pageTitle="pageTitle"
            :fullPath="fullPath"
            :getManUrl="getManUrl"
            :submitAuditUrl="submitAuditUrl"
            :roleId="roleId"
            @submitAuditClose="submitAuditClose"
          ></submit-audit>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitAudit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitAuditSaveBtn()"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 提交审核结束 -->

3、data里面加上变量

     // 提交审核开始
      submitAudit: false, //显示弹窗
      fullPath: "",
      id: 0,
      pageTitle: "",
      roleId: 13, //提交审核 roleId
      getManUrl: "/party/feedback/getUserByRoleId", //获取人员接口地址
      submitAuditUrl: "/system/training/submit", //提交审核保存接口地址
      // 提交审核结束

4、 methods 里面 添加方法    

this.getList();是页面之前获取列表数据的方法,可能每个页面获取列表的方法名称不一样

/** 提交审核 开始 */
    handleSubmitAudit(row) {
      this.submitAudit = true;
      this.id = row.id;
      this.pageTitle = this.$route.meta.title;
      this.fullPath = this.$route.fullPath.replaceAll("/", "");
    },

    handleSubmitAuditSaveBtn() {
      this.$refs.submitAudit.submitData();
    },
    // 关闭提交审核弹窗
    submitAuditClose() {
      this.submitAudit = false;
      this.getList();
    },
    /** 提交审核 结束 */

二、反馈:

1、按钮

 <el-button
            size="mini"
            type="text"
            icon="el-icon-lock"
            v-if="
              scope.row.feedBackStatus != null &&
              scope.row.feedBackStatus == '0'
            "
            @click="handleFeedback(scope.row)"
            v-hasPermi="['party:feedback:feedback']"
            >反馈</el-button
          >

 2、弹窗

 <!-- 反馈开始 -->
    <el-dialog
      title="反馈"
      :visible.sync="feedbackDialogVisible"
      width="800px"
      append-to-body
    >
      <el-row>
        <el-form label-width="80px">
          <el-form-item label="标题:">
            {{ feedbackTitle }}
          </el-form-item>
          <el-form-item label="反馈内容:">
            <el-input
              type="textarea"
              :rows="6"
              v-model="feedBackContent"
            ></el-input>
          </el-form-item> </el-form
      ></el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="feedbackDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleFeedbackSaveBtn()"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 反馈结束 -->

3、data

 //反馈开始
      feedbackTitle: "", //弹窗上面显示的标题
      feedbackDialogVisible: false, //弹窗显示和隐藏
      feedbackNewId: 0, //反馈新闻id
      feedBackContent: "",//反馈内容
      //反馈结束

4、methods

保存接口地址 

//反馈开始
    //反馈打开弹窗
    handleFeedback(row) {
      this.feedbackDialogVisible = true;
      this.feedbackNewId = row.id;
      this.feedbackTitle = row.title;
      this.feedBackContent = "";
    },
    //反馈 点击保存按钮
    handleFeedbackSaveBtn() {
      let url = "/party/feedback/feedback";
      let obj = {};
      obj.feedBackContent = this.feedBackContent;
      obj.name = this.menuName;
      obj.newId = this.feedbackNewId;
      postSaveData(url, obj).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.feedbackDialogVisible = false;
          this.getList();
        } else {
          this.$message({
            message: "保存失败,请确认",
            type: "warning",
          });
        }
      });
    },
    //反馈结束

三、分配  功能:

1、按钮

 <el-button
            size="mini"
            type="text"
            icon="el-icon-lock"
            v-if="scope.row.status == 3"
            @click="handleAssignPermissions(scope.row)"
            v-hasPermi="['party:feedback:distribution']"
            >分配权限</el-button
          >

 

2、弹框

<!-- 分配权限开始 -->
    <el-dialog
      title="分配权限"
      :visible.sync="assignPermissions"
      width="800px"
      append-to-body
    >
      <div class="el-dialog-div">
        <assign-permissions
          ref="assignPermissions"
          :key="assignPermissionsKey"
          :newId="newId"
          :menuName="menuName"
          :title="title"
          :byBranchGetTreeUrl="byBranchGetTreeUrl"
          :byBranchGetallotUrl="byBranchGetallotUrl"
          :byBranchGetAlreadyAllotUrl="byBranchGetAlreadyAllotUrl"
          :byBranchSaveDataUrl="byBranchSaveDataUrl"
          :byRoleGetTreeUrl="byRoleGetTreeUrl"
          :byRoleGetallotUrl="byRoleGetallotUrl"
          :byRoleGetAlreadyAllotUrl="byRoleGetAlreadyAllotUrl"
          :byRoleSaveDataUrl="byRoleSaveDataUrl"
          @closeAssignPermissions="closeAssignPermissions"
        ></assign-permissions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="assignPermissions = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveBtn()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 分配权限结束 -->

3、data

//分配权限开始
      assignPermissionsKey: false, //组件强制重新加载  避免重置
      //1按部门分配
      assignPermissions: false, //弹框显示 隐藏
      newId: 0,
      byBranchGetTreeUrl: "/party/feedback/getTree", //部门左侧树形部门 接口地址
      byBranchGetallotUrl: "/party/feedback/listUserByDeptId", //可分配权限用户查询接口
      byBranchGetAlreadyAllotUrl: "/party/feedback/getUserList", //已分配用户 查询接口
      byBranchSaveDataUrl: "/party/feedback/distribution", //保存接口
      //2 按角色分配
      allotRolesKey: false,
      allotRoles: false,
      byRoleGetTreeUrl: "/party/feedback/getAllRole", //左侧 获取所有角色 接口地址
      byRoleGetallotUrl: "/party/feedback/listUserByRoleId", //可分配权限用户查询接口
      byRoleGetAlreadyAllotUrl: "/party/feedback/getUserList", //已分配用户 查询接口
      byRoleSaveDataUrl: "/party/feedback/distribution", //保存接口
      //分配权限结束

4、methods

    //分配权限 开始
    //分配权限  打开弹窗
    handleAssignPermissions(row) {
      this.assignPermissions = true;
      this.assignPermissionsKey = !this.assignPermissionsKey;
      this.newId = row.id;
      this.title = row.title;
    },
    //分配权限 点击保存按钮
    handleSaveBtn() {
      this.$refs.assignPermissions.submitData();
    },
    // 分配权限 保存成功之后    孙组件调用 关闭弹窗
    closeAssignPermissions() {
      this.assignPermissions = false;
    },
    //分配权限 结束