|
|
@@ -0,0 +1,198 @@
|
|
|
+<template>
|
|
|
+ <el-drawer title="CheckList" size="50%" :modal="false" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
|
|
|
+ <div class="checklist-num">
|
|
|
+ <div v-if="checkList_dataList.length > 0"> 报告关联的任务共设置 <span style="color: #409EFF;">{{ checkList_dataList.length }}</span> 份checklist </div>
|
|
|
+ <div v-else>报告关联的任务未设置checklist</div>
|
|
|
+ </div>
|
|
|
+ <span v-if="checkList_dataList.length === 0" class="qz-report-drawer-add" @click="checklistJumpTaskAdd"><i class="el-icon-circle-plus-outline" /> 去添加</span>
|
|
|
+ <div class="checklist-laout">
|
|
|
+ <el-tabs v-if="checkList_dataList.length > 0" v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane v-for="(item, i) in checkList_dataList" :key="i" :label="item.name" :name="item.name" style="overflow-y: auto; height: calc(100vh - 157px);">
|
|
|
+ <div class="qz-report-drawer-title"> 关联任务 </div>
|
|
|
+ <multipleSelect :data="item.tasks" style="margin: 10px 0 30px;" />
|
|
|
+ <div class="qz-report-drawer-title"> 检查项 </div>
|
|
|
+ <div class="checkBox">
|
|
|
+ <div v-for="(tempItem, index) in item.templates" :key="index">
|
|
|
+ <div class="item">
|
|
|
+ <p class="title">
|
|
|
+ <el-checkbox :value="tempItem.isCheck" :label="tempItem.name" class="qz-report-checkbox-fontRest">{{ tempItem.name }}</el-checkbox>
|
|
|
+ </p>
|
|
|
+ <div style="padding: 0 0px 20px 0px; margin-left: 24px; overflow-y: auto; width: 690px">
|
|
|
+ <div v-html="tempItem.content" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <span v-if="checkList_dataList.length > 0" class="checklist-add" @click="checklistJumpTask"><i class="el-icon-edit-outline" /> 去调整</span>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import multipleSelect from '@/views/projectManage/publishTask//components/multipleSelect'
|
|
|
+import { EncryptId } from '@/utils/crypto-js.js'
|
|
|
+import { getByTasks } from '@/api/taskIndex'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ multipleSelect
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ drawer: { type: Boolean, default: false },
|
|
|
+ task: { type: Array, required: true }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: 'checklist1',
|
|
|
+ direction: 'rtl',
|
|
|
+ selectTaskid: '',
|
|
|
+ // checkList_dataList: [{ id: 1, name: 'checkList1' }, { id: 2, name: 'checkList2' }, { id: 3, name: 'checkList3' }],
|
|
|
+ checkList_dataList: [],
|
|
|
+ bizId: this.$store.state.data.bizId
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ task: {
|
|
|
+ handler(newV) {
|
|
|
+ if (!newV[0]) return
|
|
|
+ this.getByTasks(newV)
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getByTasks(arr) {
|
|
|
+ const res = await getByTasks({ taskIdList: arr })
|
|
|
+ if (res.code === 200 && res.data[0]) {
|
|
|
+ this.checkList_dataList = res.data
|
|
|
+ this.checkList_dataList.map((item, index) => {
|
|
|
+ item.name = `checklist${index + 1}`
|
|
|
+ })
|
|
|
+ this.selectTaskid = this.checkList_dataList[0].tasks[0].id
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$emit('update')
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ this.selectTaskid = this.checkList_dataList[tab.index].tasks[0].id
|
|
|
+ },
|
|
|
+ checklistJumpTask() {
|
|
|
+ const bizId_id = EncryptId(`${this.bizId}_${this.selectTaskid}`)
|
|
|
+ const newTab = this.$router.resolve({ name: '任务详情', query: { bizId_id: bizId_id, page: '6' }})
|
|
|
+ window.open(newTab.href, '_blank')
|
|
|
+ },
|
|
|
+ checklistJumpTaskAdd() {
|
|
|
+ const bizId_id = EncryptId(`${this.bizId}_${this.task[0]}`)
|
|
|
+ const newTab = this.$router.resolve({ name: '任务详情', query: { bizId_id: bizId_id, page: '6' }})
|
|
|
+ window.open(newTab.href, '_blank')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.checkBox {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.checklist-laout {
|
|
|
+ margin: 0 30px;
|
|
|
+ // >>> :after{height:0;}
|
|
|
+}
|
|
|
+.checklist-num {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #444;
|
|
|
+ position: absolute;
|
|
|
+ top: 25px;
|
|
|
+ left: 142px;
|
|
|
+}
|
|
|
+.qz-report-drawer-add {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft Sans Serif;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 35px;
|
|
|
+ color: #409EFF;
|
|
|
+ padding-left: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.checklist-add {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft Sans Serif;
|
|
|
+ font-weight: 400;
|
|
|
+ // line-height: 35px;
|
|
|
+ color: #409EFF;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 90px;
|
|
|
+}
|
|
|
+.qz-report-checkbox-fontRest {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #444444;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+.qz-report-drawer-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft Sans Serif;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #444444;
|
|
|
+}
|
|
|
+>>>.el-tabs__active-bar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+// >>> :after{height:0;}
|
|
|
+>>> :focus{outline:0;}
|
|
|
+>>>.el-drawer__header {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #333333;
|
|
|
+ border-bottom: 1px solid #E2E2E2;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ padding-left: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+>>>.el-tabs__item {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ // color: #444;
|
|
|
+ line-height: initial;
|
|
|
+}
|
|
|
+>>>.el-tabs__nav-wrap::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 0px;
|
|
|
+ height: 0px;
|
|
|
+ background-color: #E4E7ED;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+>>>.el-tabs__nav-next {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 21px;
|
|
|
+ color: #909399;
|
|
|
+ bottom: 5px;
|
|
|
+}
|
|
|
+>>>.el-tabs__nav-prev {
|
|
|
+ font-size: 21px !important;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 5px;
|
|
|
+}
|
|
|
+>>>.el-tabs__header {
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 0 15px;
|
|
|
+ padding-right: 75px;
|
|
|
+}
|
|
|
+</style>
|
wenbobowen