''

liukangdong

2024-06-03 95fb1848e5916979fb1d6c87a03a95498890ac31

 admin/src/views/business/approvalConfiguration.vue

@@ -1,16 +1,17 @@
<template>
  <TableLayout>
    <template v-slot:table-wrap>
      <el-tabs v-model="activeType" @tab-click="handleClick">
        <el-tab-pane label="普通访客" name="0"></el-tab-pane>
        <el-tab-pane label="施工访客" name="1"></el-tab-pane>
      </el-tabs>
      <div class="config">
        <div class="config_list">
          <div class="config_list_head">
            <span>配置流程</span>
            <el-button style="background: #435ebe" type="primary"
              >发布</el-button
            >
          </div>
          <div class="config_content">
            <div class="item active">
            <div class="item">
              <div class="head">发起人</div>
              <div class="content">访客</div>
            </div>
@@ -18,55 +19,41 @@
              <div class="line"></div>
              <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
            </div>
            <template v-for="(item, index) in apprList">
            <div v-for="(item, index) in apprList" :key="index">
              <div
                class="item yellow"
                :class="{ active: item.active }"
                :class="{
                  active: activeIndex == index,
                  blue: item.type == '1',
                }"
                @click="flowClick(index)"
                :key="index"
              >
                <div class="head">审批人</div>
                <div class="head">{{ item.remark }}</div>
                <div class="content">
                  <div>被访人</div>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="arrows" :key="index">
                <div class="line"></div>
                <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
                <i
                  v-if="apprList.length - 1 === index"
                  @click="handleAddAppr()"
                  class="el-icon-circle-plus add"
                ></i>
              </div>
            </template>
            <template v-if="false">
              <div
                class="item yellow"
                :class="{ active: activeSel === 'one' }"
                @click="flowClick('one')"
              >
                <div class="head">审批人</div>
                <div class="content">
                  <div>李琳-综合科</div>
                  <div v-if="item.objIds && item.objIds.length === 1 ">
                    <span>{{ item.objIds[0].name }} {{ item.objIds[0].companyName }}</span>
                    <span v-if="item.approveType == 0"> 或签</span>
                    <span v-if="item.approveType == 1"> 会签</span>
                  </div>
                  <div v-else-if="item.objIds && item.objIds.length > 1">
                    <span>{{ item.objIds[0].name }} {{ item.objIds[0].companyName }}等</span>
                    <span v-if="item.approveType == 0"> 或签</span>
                    <span v-if="item.approveType == 1"> 会签</span>
                  </div>
                  <div v-else>请选择</div>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="arrows">
                <div class="line"></div>
                <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
              </div>
            </template>
            <div
              class="item blue"
              :class="{ active: activeSel === 'two' }"
              @click="flowClick('two')"
            >
              <div class="head">抄送人</div>
              <div class="content">
                <div>请选择</div>
                <i class="el-icon-arrow-right"></i>
                <template v-if="apprList.length - 1 !== index">
                  <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>
              </div>
            </div>
          </div>
@@ -74,56 +61,97 @@
        <div class="config_data">
          <div class="config_data_item">
            <div class="config_data_item_label">选择该节点的审批人</div>
            <el-radio-group v-model="radio">
            <div class="df_ac mb10">
              <div>审批节点名称</div>
              <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"
                >
                  <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 :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="radio === 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 class="config_data_item_reviewed_content_item">
                  <span>栓子哥</span>
                  <i class="el-icon-close"></i>
                <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="radio === 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="value"
                  v-model="apprList[activeIndex].level"
                  placeholder="请选择"
                  style="margin: 0 20px 0 10px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                  <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="checked"
                <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="radio !== 0">
          <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="radio1"
              v-model="apprList[activeIndex].approveType"
              style="display: flex; flex-direction: column"
            >
              <el-radio :label="0" style="margin-bottom: 20px"
@@ -132,56 +160,68 @@
              <el-radio :label="1">会签（所有审批人都同意才可通过）</el-radio>
            </el-radio-group>
          </div>
          <div class="df_ac">
            <span class="mr10"><strong>允许修改申请项</strong></span>
            <el-switch v-model="param.aa" active-value="1" inactive-value="0">
            </el-switch>
          </div>
          <div class="df_ac mt10">
            <span class="mr20">选择修改项</span>
            <el-select
              v-model="param.list"
              collapse-tags
              multiple
              placeholder="请选择,多选"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="config_data_submit" v-if="radio !== 0">
            <el-button style="background: #435ebe" type="primary"
          <div class="config_data_submit">
            <el-button
              @click="onSubmit"
              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="800px">
      <tree-transfer
        v-model="param.menuIds"
        :title="['未选', '已选']"
        :from_data="fromData"
        :to_data="selData"
        :defaultProps="{ label: 'label' }"
        mode="transfer"
        height="500px"
        filter
        openAll
        ref="treeTransfer"
      >
      </tree-transfer>
    <el-dialog title="选择员工" :visible.sync="isShowTransfer" width="1000px">
      <div class="staff_modal">
        <div class="left">
          <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="{
                name: 'name',
                status: 'fsStatus',
                children: 'childList',
                id: 'id',
              }"
              @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>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowTransfer = false">取 消</el-button>
        <el-button type="primary" @click="isShowTransfer = false"
          >确 定</el-button
        >
        <el-button type="primary" @click="TransferSub">确 定</el-button>
      </span>
    </el-dialog>
  </TableLayout>
@@ -189,97 +229,193 @@

<script>
import TableLayout from '@/layouts/TableLayout'
import treeTransfer from 'el-tree-transfer'
// import treeTransfer from 'el-tree-transfer'
import Tree from '@/components/common/Tree'
import { approveTemplSave, approveTemplByType } from '@/api'
import { fetchList } from '@/api/business/company'
import { fetchList as memberListPost } from '@/api/business/member'
export default {
  name: 'config',
  components: {
    TableLayout,
    treeTransfer
    Tree
  },
  data () {
    return {
      activeType: '0',
      apprList: [
        { name: '', active: false },
        { name: '', active: false }
        { remark: '审批人', active: false, type: '0', objIds: [] },
        { remark: '抄送人', active: false, type: '1', objIds: [] }
      ],

      value: '',
      radio: 0,
      radio1: 0,
      checked: '',
      activeIndex: 0,

      param: {},
      searchForm: {},
      isShowTransfer: false,
      fromData: [
        {
          id: '1',
          pid: 0,
          label: '一级 1',
          children: [
            {
              id: '1-1',
              pid: '1',
              label: '二级 1-1',
              disabled: true,
              children: []
            },
            {
              id: '1-2',
              pid: '1',
              label: '二级 1-2',
              children: [
                {
                  id: '1-2-1',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-1'
                },
                {
                  id: '1-2-2',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-2'
                }
              ]
            }
          ]
        }
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      selData: []
      memberList: [],
      companyTree: []
    }
  },
  created () {
    this.getfindCompanyTreePage()
    this.initDate()
  },
  methods: {
    handleClick () {
      this.apprList = []
      const arr = [
        { remark: '审批人', active: false, type: 0, objIds: [] },
        { remark: '抄送人', active: false, type: 1, objIds: [] }
      ]
      this.apprList = [...arr]
      this.initDate()
    },
    flowClick (i) {
      this.activeIndex = i
      this.apprList.forEach((item, index) => {
        if (i === index) {
          item.active = true
          if (item.objIds && item.objIds.length > 0) {
            const objIds = item.objIds.map(i => {
              return i.id + '-' + i.name
            })
            this.$set(this.searchForm, 'objIds', objIds)
          } else {
            this.$set(this.searchForm, 'objIds', [])
          }
        } else {
          item.active = false
        }
      })
    },
    initDate () {
      const { activeType } = this
      approveTemplByType(activeType).then(res => {
        if (res && res.paramList) {
          const arr = res.paramList || []
          arr.forEach(item => {
            if (item.memberList && item.memberList.length > 0) {
              item.objIds = item.memberList.map(i => {
                return {
                  id: i.id,
                  name: i.name
                }
              })
            }
          })
          this.apprList = arr
        }

        // console.log(res);
      })
      this.flowClick(0)
      this.$forceUpdate()
    },
    onSubmit () {
      const { apprList, activeType } = this
      const temp = JSON.parse(JSON.stringify(apprList))
      temp.forEach((item, index) => {
        item.level = index + 1
        if (item.objIds && item.objIds.length > 0) {
          item.objIds = item.objIds.map(i => i.id).join(',')
        }
      })
      approveTemplSave({
        type: activeType,
        paramList: temp
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功')
        }
      })
    },
    handleDel () {
      const { activeIndex } = this
      this.apprList.splice(activeIndex, 1)
      this.activeIndex = 0
    },
    handleAddAppr () {
      this.apprList.push({ name: '', active: false })
      this.apprList.splice(this.apprList.length - 2, 0, { remark: '审批人', active: false, type: 0, objIds: [] })
      // this.apprList.push({ remark: '审批人', active: false, type: '0' })
    },

    // 获取组织树
    getfindCompanyTreePage () {
      fetchList()
        .then(res => {
          if (res && res.length > 0) {
            res[0].fsStatus = 1
            this.companyTree = res
            // // this.searchForm.erpOrgId = res[0].erpId
            // this.search()
            // this.department = this.getDepartmentTree(res)
          }
        })
    },
    getMemberList () {
      memberListPost({
        model: {
          companyId: this.searchForm.companyId || '',
          canVisit: '',
          companyType: 1,
          erpOrgId: '',
          hasFace: '',
          hkStatus: '',
          includeChild: false,
          type: 2
        },
        page: 1,
        capacity: 30
      }).then(res => {
        this.memberList = res.records || []
        this.memberList.forEach(item => {
          item.keyTemp = item.id + '-' + item.name + '-' + item.companyName || ''
        })
        // console.log('defaultProps', res)
      })
    },
    callback (row) {
      console.log(row)
      this.$set(this.searchForm, 'companyId', row.id)
      this.$set(this.searchForm, 'erpOrgId', row.erpId)
      this.getMemberList()
    },
    TransferSub () {
      const { activeIndex } = this
      if (this.searchForm.objIds && this.searchForm.objIds.length > 0) {
        if (this.searchForm.objIds.length > 20) return this.$message.warning('最多选择20人')
        const arr = this.searchForm.objIds.map(ii => {
          const obj = ii.split('-')
          return {
            id: Number(obj[0]),
            name: obj[1],
            companyName: obj[2] || ''
          }
        })
        this.apprList.forEach((item, index) => {
          if (activeIndex === index) {
            item.objIds = arr
          }
        })
      }
      this.isShowTransfer = false
      console.log(this.searchForm.objIds)
    },
    memDel (memIndex) {
      const { activeIndex } = this
      this.apprList.forEach((item, index) => {
        if (activeIndex === index) {
          item.objIds.splice(memIndex, 1)
          const objIds = item.objIds.map(i => {
            return i.id + '-' + i.name
          })
          this.$set(this.searchForm, 'objIds', objIds)
        }
      })
    },
    selStaff () {
      this.isShowTransfer = true
      this.getMemberList()
    },
    seleItem (i) {
      this.list.forEach((item, index) => {
@@ -452,45 +588,61 @@
            }
          }
        }
        .config_data_item_reviewed_content {
          width: 400px;
          margin-top: 10px;
          height: 110px;
          padding: 12px;
          box-sizing: border-box;
          border-radius: 2px;
          border: 1px solid #dfe2e8;
          display: flex;
          align-items: flex-start;
          flex-wrap: wrap;
          .add {
            font-size: 12px;
            font-weight: 400;
            color: #435ebe;
            cursor: pointer;
            margin-top: 3px;
          }
          .config_data_item_reviewed_content_item {
            padding: 3px 5px;
            background: #f4f7fc;
            border-radius: 2px;
            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;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.config_data_item_reviewed_content {
  width: 400px;
  margin-top: 10px;
  height: 110px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #dfe2e8;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  .add {
    font-size: 12px;
    font-weight: 400;
    color: #435ebe;
    cursor: pointer;
    margin-top: 3px;
  }
  .config_data_item_reviewed_content_item {
    padding: 3px 5px;
    background: #f4f7fc;
    border-radius: 2px;
    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;
      cursor: pointer;
    }
  }
}
.staff_modal {
  display: flex;
  .left {
    width: 300px;
    margin-right: 20px;
  }
  .transfer {
    height: 600px;
    ::v-deep .el-transfer-panel__body {
      height: 500px;
    }
    ::v-deep .el-transfer-panel__list.is-filterable {
      height: 480px;
    }
  }
}
</style>