fe-manage/src/components/project/lockLecturer.vue

<template>
  <div @click="openDrawer">
    <slot></slot>
  </div>
  <a-drawer
    :visible="visible"
    class="drawerStyle impotergroupleader"
    placement="right"
    width="80%"
    @close="closeDrawer"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">{{ title }}</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="content">
        <div class="title">
          <div class="line"></div>
          <div class="text">培训发生组织基本信息</div>
        </div>
        <div class="desc">
          <a-descriptions :column="2" bordered>
            <a-descriptions-item :labelStyle="{ width: '165px' }" label="培训发生组织编号"><div style="user-select:text">{{formData?.affiliationCode||'-'}}</div></a-descriptions-item>
            <a-descriptions-item :labelStyle="{ width: '165px' }" label="培训发生组织名称"><div style="user-select:text">{{formData?.affiliationName||'-'}}</div></a-descriptions-item>
            <a-descriptions-item label="是否为根节点">
              <span v-if="formData?.parentName"><span style="margin-right:10px">否</span>({{ formData?.parentName }})</span>
              <span v-else><span style="margin-right:10px">是</span>({{ {1:'一',2:'二',3:'三'}[formData?.code] }}级审批)</span>
            </a-descriptions-item>
            <a-descriptions-item label="组织担当">{{formData?.act||'-'}}</a-descriptions-item>
            <a-descriptions-item v-if="formData?.isParent==1" label="一级审批人">{{formData?.one||'-'}}</a-descriptions-item>
            <a-descriptions-item v-if="formData?.isParent==1" label="二级审批人">{{formData?.two||'-'}}</a-descriptions-item>
            <a-descriptions-item v-if="formData?.isParent==1" label="三级审批人">{{formData?.three||'-'}}</a-descriptions-item>
            <a-descriptions-item label="状态">
              {{{1:'待提交', 2:'审核中',3: '已完成',4: '审核失败',5:'待审核'}[formData?.status]}}
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="tabs">
          <a-tabs @change="change" v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="管理组织列表">
              <div style="margin-bottom: 30px">
                <a-table :columns="columns" :data-source="formData?.tableData" :pagination="false"/>
              </div>
              <div style="margin-bottom: 100px">
                <!-- <a-descriptions :column="2" bordered>
                  <a-descriptions-item label="培训发生组织编号">{{formData?.affiliationCode||'-'}}</a-descriptions-item>
                  <a-descriptions-item label="培训发生组名称">{{formData?.affiliationName||'-'}}</a-descriptions-item>
                  <a-descriptions-item label="是否为根节点">{{formData?.isParent==1?'否':'是'}}</a-descriptions-item>
                  <a-descriptions-item label="组织担当">{{formData?.act||'-'}}</a-descriptions-item>
                  <a-descriptions-item label="一级审批人">{{formData?.one||'-'}}</a-descriptions-item>
                  <a-descriptions-item label="二级审批人">{{formData?.two||'-'}}</a-descriptions-item>
                  <a-descriptions-item label="三级审批人">{{formData?.three||'-'}}</a-descriptions-item>
                  <a-descriptions-item label="状态">
                    {{['-','待审核', '审核中', '已完成', '审核失败'][formData?.type]}}
                  </a-descriptions-item>
                </a-descriptions> -->
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="审批记录" force-render>
              <div style="margin-bottom: 20px">
                <a-table :columns="columnsTwo" :loading="formData?.loadingTwo" :data-source="formData?.tableDataTwo" :pagination="pagination">
                  <!-- <template #action="{ record }">
                    <div class="action">
                      <div style="color: #1890ff;cursor: pointer;" class="btn" @click="lookList(record)">查看</div>
                    </div>
                  </template> -->
                </a-table>
              </div>
              <!-- <div style="margin-bottom: 100px">
                <a-table v-if="threeList" :columns="columnsThree" :loading="formData?.loadingThree" :data-source="formData?.tableDataThree" :pagination="false"/>
              </div> -->
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <!-- <div class="btnn" v-if="formData?.status==1||formData?.status==4"> -->
        <!-- <button class="btn2" @click="closeDrawer">取消</button>
        <button class="btn2" @click="closeDrawer">确定</button> -->
        <!-- <button class="btn2" @click="confirm">撤销编辑内容</button> -->
      <!-- </div> -->
    </div>
    <a-modal :footer="null" width="800px" v-model:visible="visibleModal" title="审批记录详情">
      <div style="margin: 20px;padding-bottom: 20px;">
        <a-table :columns="columnsThree" :loading="formData?.loadingThree" :data-source="formData?.tableDataThree" :pagination="false"/>
      </div>
    </a-modal>
  </a-drawer>
</template>

<script setup lang="jsx">
import {defineEmits, defineProps, ref,watch,reactive,computed} from "vue";
import dialog from '@/utils/dialog'
import * as api from '@/api/Lecturer'
import { message } from 'ant-design-vue';
const props = defineProps({
  id: {
    type: String,
    defalut: ""
  },
  title: {
    type: String,
    default: ""
  },
  moduleType:{
    type: Number,
    default: null
  },
  parentName: String,
});
const emit = defineEmits({});
const visibleModal = ref(false)
const columns = [
  {
    title: '组织的名称',
    dataIndex: 'orgName',
    key: 'orgName',
    align: 'center',
  },
  {
    title: '类型',
    dataIndex: 'updateStatus',
    key: 'updateStatus',
    align: 'center',
    customRender: ({text})=>{
      switch (text) {
        case 0:
          return <span>未更改</span>;
        case 1:
          return <span>新增</span>;
        case 2:
          return <span>移除</span>;
        case 3:
          return <span>编辑</span>;
        default:
          return <span>-</span>;
      }
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    customRender: ({text})=>{
      switch (text) {
        case 1:
          return <span>待提交</span>;
        case 2:
          return <span>审核中</span>;
        case 3:
          return <span>已完成</span>;
        case 4:
          return <span>审核失败</span>;
        case 5:
          return <span>待审核</span>;
        default:
          return <span>-</span>;
      }
    },
  },
];
const formData = ref({})
const columnsThree = [
  {
    title: '层级审批人',
    dataIndex: 'employeeNames',
    key: 'employeeNames',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'approvalStatus',
    key: 'approvalStatus',
    align: 'center',
    customRender: ({text})=>{
      switch (text) {
        case -1:
          return <span>未处理</span>;
        case 3:
          return <span>通过</span>;
        case 4:
          return <span>拒绝</span>;
        default:
          return <span>-</span>;
      }
    }
  },
  {
    title: '审批人',
    dataIndex: 'employeeName',
    key: 'employeeName',
    align: 'center',
  },
  {
    title: '审批时间',
    dataIndex: 'approvalTime',
    key: 'approvalTime',
    align: 'center',
  },
  {
    title: '审批建议',
    dataIndex: 'approvalMsg',
    key: 'approvalMsg',
    align: 'center',
    ellipsis: true,
    width: 200,
    customRender: ({text})=>{
      return <span>{text||'-'}</span>
    }
  },
]
const columnsTwo = ref([
  {
    title: '审批提交时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '审批状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    customRender: ({text})=>{
      switch (text) {
        case 0:
          return <span>待提交</span>;
        case 1:
          return <span>待审核</span>;
        case 2:
          return <span>审核中</span>;
        case 3:
          return <span>审核通过</span>;
        case 4:
          return <span>拒绝</span>;
        case 5:
          return <span>撤销中</span>;
        case 6:
          return <span>已撤销</span>;
        default:
          return <span>-</span>;
      }
    }
  },
  {
    title: '提交人',
    dataIndex: 'employeeName',
    key: 'employeeName',
    align: 'center',
  },
  // {
  //   title: '操作',
  //   dataIndex: 'address',
  //   key:'age',
  //   align: 'center',
  //   slots: { customRender: "action" },
  // }
])
const approvalData = ref(null)
const threeList = ref(false)
const lookList = (record) => {
  console.log(record,'resssssss')
  // if(!threeList.value||record.approvalId!=approvalData.value){
    // threeList.value = true
    // approvalData.value = record.approvalId
    formData.value.tableDataThree = []
    visibleModal.value = true
    formData.value.loadingThree = true
    api.getApprovalResultByApprovalIdList(record.approvalId).then(res=>{
      if(res.data.code == 200){
        formData.value.tableDataThree = res.data.data
      }
      formData.value.loadingThree = false
    }).catch(err=>{
      message.destroy()
      formData.value.loadingThree = false
      message.error(err.data.msg)
    })
  // }else{
  //   threeList.value = false
  //   approvalData.value = null
  // }
}
const visible = ref(false);
watch(visible, (val)=>{
  if(val){
    threeList.value = false
    activeKey.value = '1'
    if(!props.moduleType){
      console.log("getAffiliationModuleTypeById props.moduleType",props.moduleType)
      api.getAffiliationModuleTypeById(props.id,props.moduleType).then(res=>{
        if(res.data.code == 200){
          formData.value = res.data.data
          formData.value.parentName = props.parentName
          formData.value.act = filterList(formData.value.affiliationUserList,0)
          formData.value.one = filterList(formData.value.affiliationUserList,1)
          formData.value.two = filterList(formData.value.affiliationUserList,2)
          formData.value.three = filterList(formData.value.affiliationUserList,3)
          formData.value.tableData = res.data.data.affiliationOrgList
        }
      }).catch(err=>{
        message.destroy()
        message.error(err.data.msg)
      })
    }else{
      console.log("getAffiliationById props.moduleType")
        api.getAffiliationById(props.id).then(res=>{
        if(res.data.code == 200){
          formData.value = res.data.data
          formData.value.parentName = props.parentName
          formData.value.act = filterList(formData.value.affiliationUserList,0)
          formData.value.one = filterList(formData.value.affiliationUserList,1)
          formData.value.two = filterList(formData.value.affiliationUserList,2)
          formData.value.three = filterList(formData.value.affiliationUserList,3)
          formData.value.tableData = res.data.data.affiliationOrgList
        }
      }).catch(err=>{
        message.destroy()
        message.error(err.data.msg)
      })
    }
 
    // getTwoData()
  }
})
const getTwoData = () => {
  formData.value.loadingTwo = true
  params.businessId = props.id
  api.getByBusinessIdList(params).then(res=>{
    if(res.data.code == 200){
      formData.value.tableDataTwo = res.data.data.records
      params.total = res.data.data.total
    }
    formData.value.loadingTwo = false
  }).catch(err=>{
    message.destroy()
    message.error(err.data.msg)
    formData.value.loadingTwo = false
  })
}
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  businessType: 2,
  businessId: props.id
})
const pagination = computed(() => ({
  total: params.total,
  showSizeChanger: true,
  showQuickJumper:true,
  current: params.pageNo,
  pageSize: params.pageSize,
  onChange: paginationChange,
}));
const paginationChange = (e,pageSize) => {
  params.pageNo = e;
  params.pageSize = pageSize
  getTwoData()
};
const filterList = (val,index) => {
  return val?.filter(item=>item.type==index).map(item=>item.userName).join(',')
}
const closeDrawer = () => {
  visible.value = false;
};
const confirm = () => {
  dialog({
    content: "您确定撤销编辑吗?撤销后将恢复到'已完成”前状态，且无法恢复。请谨慎操作。",
    ok: () => {
      api.recovery(props.id).then(res=>{
        if(res.data.code == 200){
          message.success("撤销成功")
          visible.value = false;
          emit('searchList',true)
        }
      }).catch(err=>{
        message.destroy()
        message.error(err.data.msg)
      })
    } 
  })
}
const activeKey = ref("1");
const change = (val)=>{
  // console.log(val,'val')
  if(val==2){
    getTwoData()
  }
}
function openDrawer() {
  visible.value = true;
}
</script>

<style scoped lang="scss">
.impotergroupleader > .ant-drawer-content-wrapper  {
  min-width: 800px !important;
  width: 800px !important;
}
.impotergroupleader {
  .drawerMain {
    min-width: 600px;
    margin:0;
    padding: 0px 32px 0px 32px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;

    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
        margin: 0;
      }
    }
    .content{
      padding-right: 20px;
      .title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .line{
          width: 5px;
          height: 15px;
          background: #4ea6ff;
          margin-right: 10px;
        }
        .text{

        }
      }
      .desc{
        margin-bottom: 30px;
      }
    }

    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }

      .btn2 {
        cursor: pointer;
        width: 120px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
</style>