| | |
| | | <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"> |
| | |
| | | <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"> |
| | | <!-- 审批 --> |
| | |
| | | </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> |
| | |
| | | <!-- 抄送 --> |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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"> |
| | |
| | | font-size: 12px; |
| | | color: #666666; |
| | | } |
| | | |
| | | .config { |
| | | width: 100%; |
| | | padding-bottom: 20px; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .config_list { |
| | | width: 543px; |
| | | height: 100%; |
| | |
| | | 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); |
| | |
| | | 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; |
| | |
| | | z-index: 999; |
| | | top: 10px; |
| | | } |
| | | |
| | | img { |
| | | width: 12px; |
| | | } |
| | | } |
| | | |
| | | .item { |
| | | width: 200px; |
| | | cursor: pointer; |
| | |
| | | position: relative; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .head { |
| | | height: 32px; |
| | | line-height: 32px; |
| | | padding: 2px 12px; |
| | | color: #fff; |
| | | } |
| | | |
| | | .content { |
| | | flex: 1; |
| | | background-color: #fff; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .config_data_item_reviewed_content { |
| | | width: 400px; |
| | | margin-top: 10px; |
| | |
| | | display: flex; |
| | | align-items: flex-start; |
| | | flex-wrap: wrap; |
| | | |
| | | .add { |
| | | font-size: 12px; |
| | | font-weight: 400; |
| | |
| | | cursor: pointer; |
| | | margin-top: 3px; |
| | | } |
| | | |
| | | .config_data_item_reviewed_content_item { |
| | | padding: 3px 5px; |
| | | background: #f4f7fc; |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |