jiangping
2024-10-10 d7c484c2f5ff13b000b38cc2d078bfe752d3dad8
admin/src/components/business/OperaPlatformApproveTemplWindow.vue
@@ -1,11 +1,5 @@
<template>
  <GlobalWindow
      :title="title"
      width="100%"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm"
  >
  <GlobalWindow :title="title" width="100%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
    <TableLayout>
      <template v-slot:table-wrap>
        <div class="config">
@@ -23,14 +17,10 @@
                <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
              </div>
              <div v-for="(item, index) in apprList" :key="index">
                <div
                    class="item yellow"
                    :class="{
                <div class="item yellow" :class="{
                  active: activeIndex == index,
                  blue: item.type == '1',
                }"
                    @click="flowClick(index)"
                >
                }" @click="flowClick(index)">
                  <div class="head">{{ item.remark }}</div>
                  <div class="content">
                    <!-- 审批 -->
@@ -40,25 +30,19 @@
                      </template>
                      <template v-if="item.memberType == '1'">
                        <div v-if="item.objIds && item.objIds.length === 1">
                        <span
                        >{{ item.objIds[0].name }}
                          {{ item.objIds[0].companyName }}</span
                        >
                          <span>{{ item.objIds[0].name }}
                            {{ item.objIds[0].companyName }}</span>
                          <span v-if="item.approveType == 0 && item.type == '0'">
                          或签</span
                          >
                            或签</span>
                          <span v-if="item.approveType == 1 && item.type == '0'">
                          会签</span
                          >
                            会签</span>
                        </div>
                        <div v-else-if="item.objIds && item.objIds.length > 1">
                          <span>{{ item.objIds[0].name }} 等</span>
                          <span v-if="item.approveType == 0 && item.type == '0'">
                          或签</span
                          >
                            或签</span>
                          <span v-if="item.approveType == 1 && item.type == '0'">
                          会签</span
                          >
                            会签</span>
                        </div>
                        <div v-else>请选择</div>
                        <i class="el-icon-arrow-right"></i>
@@ -67,19 +51,14 @@
                    <!-- 抄送 -->
                    <template v-if="item.type == 1">
                      <div v-if="item.objIds && item.objIds.length === 1">
                        <span
                        >{{ item.objIds[0].name }}
                          {{ item.objIds[0].companyName }}</span
                        >
                        <span>{{ item.objIds[0].name }}
                          {{ item.objIds[0].companyName }}</span>
                      </div>
                      <div v-else-if="item.objIds && item.objIds.length > 1">
                        <span>{{ item.objIds[0].name }} 等</span>
                      </div>
                      <div v-else>请选择</div>
                      <i
                          v-if="item.memberType == '1'"
                          class="el-icon-arrow-right"
                      ></i>
                      <i v-if="item.memberType == '1'" class="el-icon-arrow-right"></i>
                    </template>
                  </div>
                </div>
@@ -88,11 +67,7 @@
                    <div class="line"></div>
                    <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
                  </template>
                  <i
                      v-if="apprList.length - 2 === index"
                      @click="handleAddAppr()"
                      class="el-icon-circle-plus add"
                  ></i>
                  <i v-if="apprList.length - 2 === index" @click="handleAddAppr()" class="el-icon-circle-plus add"></i>
                </div>
              </div>
            </div>
@@ -102,160 +77,103 @@
              <div class="config_data_item_label">选择该节点的审批人</div>
              <div class="df_ac mb10">
                <div>审批节点名称</div>
                <el-input
                    class="w200 ml10"
                    v-model="apprList[activeIndex].remark"
                ></el-input>
                <el-input class="w200 ml10" v-model="apprList[activeIndex].remark"></el-input>
              </div>
              <!-- 抄送人 -->
              <template v-if="apprList[activeIndex].type == '1'">
                <div class="config_data_item_reviewed_content">
                  <div
                      v-for="mem in apprList[activeIndex].objIds"
                      :key="mem.id"
                      class="config_data_item_reviewed_content_item"
                  >
                  <div v-for="mem in apprList[activeIndex].objIds" :key="mem.id"
                    class="config_data_item_reviewed_content_item">
                    <span>{{ mem.name }}</span>
                    <i class="el-icon-close"></i>
                  </div>
                  <span class="add" @click="selStaff">+添加</span>
                </div>
              </template>
              <el-radio-group
                  v-if="apprList[activeIndex].type == '0'"
                  v-model="apprList[activeIndex].memberType"
              >
              <el-radio-group v-if="apprList[activeIndex].type == '0'" v-model="apprList[activeIndex].memberType">
<!--                <el-radio :label="0">申请人</el-radio>-->
                <el-radio :label="1">指定人员</el-radio>
                <el-radio :label="2">部门主管</el-radio>
              </el-radio-group>
              <div
                  class="config_data_item_reviewed"
                  v-if="apprList[activeIndex].memberType == 1"
              >
              <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 1">
                <div class="config_data_item_reviewed_label">
                  <span>指定审核人</span>
                  <span>不超过20人</span>
                </div>
                <div class="config_data_item_reviewed_content">
                  <div
                      v-for="(mem, memIndex) in apprList[activeIndex].objIds"
                      :key="mem.id"
                      class="config_data_item_reviewed_content_item"
                  >
                  <div v-for="(mem, memIndex) in apprList[activeIndex].objIds" :key="mem.id"
                    class="config_data_item_reviewed_content_item">
                    <span>{{ mem.name }}</span>
                    <i class="el-icon-close" @click="memDel(memIndex)"></i>
                  </div>
                  <span class="add" @click="selStaff">+添加</span>
                </div>
              </div>
              <div
                  class="config_data_item_reviewed"
                  v-if="apprList[activeIndex].memberType == 2"
              >
              <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 2">
                <div class="config_data_item_reviewed_label">
                  <span>部门主管</span>
                </div>
                <div class="config_data_item_reviewed_r">
                  <span>申请人的</span>
                  <el-select
                      v-model="apprList[activeIndex].objLevel"
                      placeholder="请选择"
                      style="margin: 0 20px 0 10px"
                  >
                  <el-select v-model="apprList[activeIndex].objLevel" placeholder="请选择" style="margin: 0 20px 0 10px">
                    <el-option label="直接主管" :value="0" />
                    <el-option label="二级主管" :value="1" />
                    <el-option label="三级主管" :value="2" />
                    <el-option label="四级主管" :value="4" />
                  </el-select>
                  <el-checkbox
                      v-model="apprList[activeIndex].noleaderOpt"
                      :true-label="1"
                      :false-label="0"
                  >找不到主管时,由上级主管代审核</el-checkbox>
                  <el-checkbox v-model="apprList[activeIndex].noleaderOpt" :true-label="1"
                    :false-label="0">找不到主管时,由上级主管代审核</el-checkbox>
                </div>
              </div>
            </div>
            <div
                class="config_data_item"
                v-if="
            <div class="config_data_item" v-if="
              (apprList[activeIndex].memberType == 1 ||
                apprList[activeIndex].memberType == 2) &&
              apprList[activeIndex].type == '0'
            "
            >
            ">
              <div class="config_data_item_label">
                审批方式
                <span>审批人为多个时,采用的审批方式</span>
              </div>
              <el-radio-group
                  v-model="apprList[activeIndex].approveType"
                  style="display: flex; flex-direction: column"
              >
                <el-radio :label="0" style="margin-bottom: 20px"
                >或签(其中一名审批人同意或拒绝即可)</el-radio
                >
              <el-radio-group v-model="apprList[activeIndex].approveType" style="display: flex; flex-direction: column">
                <el-radio :label="0" style="margin-bottom: 20px">或签(其中一名审批人同意或拒绝即可)</el-radio>
                <el-radio :label="1">会签(所有审批人都同意才可通过)</el-radio>
              </el-radio-group>
            </div>
            <div class="config_data_submit">
              <el-button
                  @click="onSubmit"
                  :loading="subLoading"
                  style="background: #435ebe"
                  type="primary"
              >保存配置项</el-button
              >
              <el-button
                  v-if="activeIndex !== 0 && activeIndex !== apprList.length - 1"
                  type="danger"
                  plain
                  @click="handleDel"
              >删除节点</el-button
              >
              <el-button @click="onSubmit" :loading="subLoading" style="background: #435ebe"
                type="primary">保存配置项</el-button>
              <el-button v-if="activeIndex !== 0 && activeIndex !== apprList.length - 1" type="danger" plain
                @click="handleDel">删除节点</el-button>
            </div>
          </div>
        </div>
      </template>
      <!--  -->
      <el-dialog title="选择员工" :visible.sync="isShowTransfer" width="1000px" style="z-index: 99999" append-to-body>
      <el-dialog title="选择员工" :visible.sync="isShowTransfer" width="900px" style="z-index: 99999" append-to-body>
        <div class="staff_modal">
          <div class="left">
            <div
                style="
            <div style="
              width: 100%;
              height: 50px;
              background: rgba(242, 242, 242, 1);
              line-height: 50px;
              text-align: center;
              font-size: 14px;
            "
            >
            ">
              企业组织架构
            </div>
            <div style="width: 100%; height: 100%; overflow-y: scroll">
              <Tree
                  :list="companyTree"
                  :defaultProps="{
              <Tree :list="companyTree" :defaultProps="{
                name: 'name',
                status: 'fsStatus',
                children: 'childList',
                id: 'id',
              }"
                  @callback="callback"
              />
              }" @callback="callback" />
            </div>
          </div>
          <el-transfer
              filterable
              :title="['未选', '已选']"
              openAll
              :props="{ label: 'name', key: 'keyTemp' }"
              filter-placeholder="搜索员工"
              v-model="searchForm.objIds"
              :data="memberList"
              class="transfer"
          >
          <el-transfer filterable  :titles="['未选', '已选']" openAll :props="{ label: 'name', key: 'keyTemp' }"
            filter-placeholder="搜索员工" v-model="searchForm.objIds" :data="memberList" class="transfer">
          </el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
@@ -489,6 +407,7 @@
  font-size: 12px;
  color: #666666;
}
.config {
 width: 100%;
 padding-bottom: 20px;
@@ -497,6 +416,7 @@
 display: flex;
 align-items: center;
 justify-content: space-between;
.config_list {
  width: 543px;
  height: 100%;
@@ -506,18 +426,21 @@
  box-sizing: border-box;
  border: 1px solid #eeeeee;
  background: #f7f7f7;
.config_list_head {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
span {
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
}
.config_content {
  width: 100%;
  height: calc(100% - 40px);
@@ -527,28 +450,35 @@
  display: flex;
  align-items: center;
  flex-direction: column;
&::-webkit-scrollbar {
   width: 0;
 }
.active {
  border: 2px solid #4456ac !important;
}
.yellow {
  background: #e89e42 !important;
}
.blue {
  background: #5094f3 !important;
}
.arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
.line {
  width: 1px;
  height: 60px;
  background-color: #ccc;
}
.add {
  font-size: 40px;
  color: #2080f7;
@@ -557,10 +487,12 @@
  z-index: 999;
  top: 10px;
}
img {
  width: 12px;
}
}
.item {
  width: 200px;
  cursor: pointer;
@@ -571,12 +503,14 @@
  position: relative;
  display: flex;
  flex-direction: column;
.head {
  height: 32px;
  line-height: 32px;
  padding: 2px 12px;
  color: #fff;
}
.content {
  flex: 1;
  background-color: #fff;
@@ -585,32 +519,39 @@
  padding: 0 12px;
  justify-content: space-between;
}
&:last-child {
   margin: 0 !important;
 }
}
}
}
.config_data {
  flex: 1;
  height: 100%;
  margin-left: 20px;
.config_data_submit {
  margin-top: 50px;
}
.config_data_item {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
&:last-child {
   margin: 0 !important;
 }
.config_data_item_label {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  margin-bottom: 20px;
span {
  font-size: 12px;
  font-weight: 400;
@@ -618,14 +559,17 @@
  margin-left: 10px;
}
}
.config_data_item_reviewed {
  width: 100%;
  margin-top: 20px;
.config_data_item_reviewed_r {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
span {
  flex-shrink: 0;
  font-size: 14px;
@@ -633,15 +577,18 @@
  color: #666666;
}
}
.config_data_item_reviewed_label {
  display: flex;
  align-items: center;
span {
&:nth-child(1) {
   font-size: 14px;
   font-weight: 400;
   color: #222222;
 }
&:nth-child(2) {
   font-size: 12px;
   font-weight: 400;
@@ -654,6 +601,7 @@
}
}
}
.config_data_item_reviewed_content {
  width: 400px;
  margin-top: 10px;
@@ -665,6 +613,7 @@
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
.add {
  font-size: 12px;
  font-weight: 400;
@@ -672,6 +621,7 @@
  cursor: pointer;
  margin-top: 3px;
}
.config_data_item_reviewed_content_item {
  padding: 3px 5px;
  background: #f4f7fc;
@@ -679,11 +629,13 @@
  box-sizing: border-box;
  margin-right: 10px;
  margin-bottom: 10px;
span {
  font-size: 12px;
  font-weight: 400;
  color: #333333;
}
i {
  color: #949ba2;
  margin-left: 10px;
@@ -691,17 +643,29 @@
}
}
}
.staff_modal {
  display: flex;
.left {
  width: 300px;
    width: 240px;
  margin-right: 20px;
}
.transfer {
  height: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep .el-transfer-panel{
      flex: 1;
      height: 100%;
    }
::v-deep .el-transfer-panel__body {
  height: 500px;
}
::v-deep .el-transfer-panel__list.is-filterable {
  height: 480px;
}