xiangan_pc/src/page-subspecialty/views/modules/scientificManagement/sys/project.vue

<template>
  <!-- 科研课题管理 -->
  <el-card shadow="never" class="aui-card--fill project-main">
    <div class="mod-sys__role">
      <el-form
        :inline="true"
        :model="dataForm"
        class="project-head-form"
        @submit.native.prevent
        @keyup.enter.native="getDataList()"
      >
        <div>
          <el-form-item>
            <el-input
              v-model="dataForm.name"
              :placeholder="'课题名称'"
              clearable
              @clear="getDataList()"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">{{ $t("query") }}</el-button>
          </el-form-item>
          <!-- 查询条件 -->
          <el-form-item label="">
            <el-radio-group
              v-model="dataForm.status"
              @change="getDataList()"
            >
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">未开始</el-radio-button>
              <el-radio-button label="2">进行中</el-radio-button>
              <el-radio-button label="3">已完成</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item>
          <!-- 新增 -->
          <el-button
            type="primary"
            @click="addOrUpdateHandle()"
          >{{ $t("add") }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" border :data="dataList">
        <!-- 展开 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-width="90px" class="expand-form">
              <el-form-item :label="'课题名称'">
                <span>{{ scope.row.name }}</span>
              </el-form-item>
              <el-form-item :label="'课题代码'">
                <span>{{ scope.row.code }}</span>
              </el-form-item>
              <el-form-item :label="'课题类型'">
                <span>{{ scope.row.projectType }}</span>
              </el-form-item>
              <el-form-item :label="'批件号'">
                <span>{{ scope.row.drugApprovalNumber }}</span>
              </el-form-item>
              <!-- 关注指标-->
              <el-form-item :label="'关注指标'">
                <template v-if="scope.row.kpiList&&scope.row.kpiList.length>0">
                  <kpi-select style="margin:10px 20px 10px 0;" :value="scope.row.kpiList" :type="4" />
                </template>
              </el-form-item>
              <el-form-item :label="'受试者'">
                <span>{{ scope.row.patientNum + "人" }}</span>
              </el-form-item>
              <el-form-item :label="'起止日期'">
                <span>{{ scope.row.beginDate | dateFilterTwo }}</span>
                <span v-if="scope.row.endDate">至</span>
                <span>{{ scope.row.endDate | dateFilterTwo }}</span>
              </el-form-item>
              <el-form-item :label="'课题状态'">
                <el-tag size="small" :type="scope.row.status |statusFilter_type">
                  {{ scope.row.status | statusFilter }}
                </el-tag>
              </el-form-item>
              <el-form-item :label="'审批状态'">
                <el-tag size="small" :type="scope.row.approvalStatus |approvalStatusFilter_type">
                  {{ scope.row.approvalStatus | approvalStatusFilter }}
                  <el-tooltip
                    v-if="scope.row.approvalStatus==2"
                    class="item"
                    effect="dark"
                    :content="scope.row.approvalComment||''"
                    placement="top-start"
                  >
                    <i class="el-icon-warning-outline el-icon--right" />
                  </el-tooltip>
                </el-tag>
              </el-form-item>
              <el-form-item :label="'创建时间'">
                <span> {{ scope.row.createDate }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 课题名称 -->
        <el-table-column
          prop="name"
          :label="'课题名称'"
          header-align="center"
          align="left"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.approvalStatus==3">
              <a href="#" @click="windowOpen_project(scope.row.id,scope.row.deptId)">{{ scope.row.name }} </a>
            </span>
            <span v-else>
              {{ scope.row.name }}
            </span>
          </template>
        </el-table-column>
        <!-- 课题状态 -->
        <el-table-column
          prop="status"
          :label="'课题状态'"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.status |statusFilter_type">
              {{ scope.row.status | statusFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 审批状态 -->
        <el-table-column
          prop="approvalStatus"
          :label="'审批状态'"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.approvalStatus |approvalStatusFilter_type">
              {{ scope.row.approvalStatus | approvalStatusFilter }}
              <el-tooltip
                v-if="scope.row.approvalStatus==2"
                class="item"
                effect="dark"
                :content="scope.row.approvalComment||''"
                placement="top-start"
              >
                <i class="el-icon-warning-outline el-icon--right" />
              </el-tooltip>
            </el-tag>
          </template>
        </el-table-column>
        <!-- 负责人 -->
        <el-table-column
          prop="projectAdminUserName"
          :label="'负责人'"
          header-align="center"
          align="center"
        />
        <el-table-column
          :label="$t('handle')"
          header-align="center"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="opPermission(scope.row.projectAdminUserId)">
              <el-button
                v-if="$hasPermission('') && scope.row.approvalStatus==3 "
                type="text"
                size="small"
                @click="assignPeopleHandle(scope.row)"
              >人员
              </el-button>
              <el-button
                v-if="$hasPermission('') && scope.row.approvalStatus==3"
                type="text"
                size="small"
                @click="addOrUpdateHandle(scope.row.id)"
              >{{ $t("update") }}
              </el-button>
              <el-button
                v-if="$hasPermission('')&& scope.row.approvalStatus!=3"
                type="text"
                size="small"
                style="color: red"
                @click="deleteHandle(scope.row.id)"
              >{{ $t("delete") }}
              </el-button>
            </span>
            <span v-else>
              <el-button
                type="text"
                size="small"
                @click="windowOpen_project(scope.row.id,scope.row.deptId)"
              >浏览
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="total"
        background
        layout="prev, pager, next"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      />
      <!-- 弹框 -->
      <el-dialog
        title="分配人员"
        :visible.sync="userSelectVisible"
        width="650px"
      >
        <div style="text-align: center">
          <el-transfer
            v-model="rightValue"
            style="text-align: left; display: inline-block"
            :render-content="renderFunc"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}',
            }"
            :titles="['未加入', '已加入课题']"
            :props="{ key: 'userId', label: 'realName' }"
            :data="AllJoinedPeopleList"
            @change="handleChange"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="userSelectVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="sureJoinedPeopleClick"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      />
    </div>
  </el-card>

</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import checked from '@/mixins/checked'
import AddOrUpdate from './project-add-or-update'
import kpiSelect from '@/components/kpi-select'

export default {
  components: { AddOrUpdate, kpiSelect },
  filters: {
    statusFilter(val) {
      return {
        1: '未开始',
        2: '进行中',
        3: '已完成'
      }[val]
    },
    statusFilter_type(val) {
      const map = {
        1: 'danger',
        2: '',
        3: 'success'
      }
      return map[val]
    },
    approvalStatusFilter(val) {
      return {
        1: '待审核',
        2: '未通过',
        3: '已通过'
      }[val]
    },
    approvalStatusFilter_type(val) {
      return {
        1: '',
        2: 'danger',
        3: 'success'
      }[val]
    }
  },
  mixins: [mixinViewModule, checked],
  data() {
    return {
      mixinViewModuleOptions: {
        // getDataListURL: '/project/approvalPage',
        getDataListURL: '/project/page',
        getDataListIsPage: true,
        deleteURL: '/project',
        deleteIsBatch: false
      },
      dataForm: {
        status: '',
        name: ''
      },
      cheackAllFooter: false,
      currentTableList: [],
      userSelectVisible: false,
      rightValue: [],
      JoinedPeopleList: [],
      notJoinedPeopleList: [],
      AllJoinedPeopleList: [],
      renderFunc(h, option) {
        return <span>{option.realName}</span>
      },
      currentPeopleId: '',
      joinedListUserId: []
    }
  },
  methods: {
    windowOpen_project(projectId, deptId) {
      // window.open(`project/home?id=${projectId}`)
      // const { href } = this.$router.resolve({
      //   name: 'subject'
      // })
      // window.open(href, '_blank')
      // this.$router.push('subjectMgt')
    },
    handleChange(value) {
      this.joinedListUserId = value
    },
    opPermission(projectAdminUserId) {
      return projectAdminUserId === this.$store.state.user.id
    },
    // 添加科研人员时，获取人员列表
    getUserList(id) {
      this.$http.get(`/projectUser/getUserList/${id}`).then(({ data: res }) => {
        this.JoinedPeopleList = res.data.joinedList
        this.notJoinedPeopleList = res.data.notJoined
        this.rightValue = []
        // 已加入
        if (res.data.joinedList.length > 0) {
          res.data.joinedList.forEach(item => {
            this.rightValue.push(item.userId)
            if (item.isAdmin === 1) {
              item.disabled = true
            }
          })
        }
        // 未加入
        if (res.data.notJoined.length > 0) {
          res.data.notJoined.forEach(item => {
            if (item.isAdmin === 1) {
              item.disabled = true
            }
          })
        }
        this.AllJoinedPeopleList = [...res.data.joinedList, ...res.data.notJoined]
      })
    },
    // 分配人员
    assignPeopleHandle(scope) {
      this.currentPeopleId = scope.id
      this.userSelectVisible = true
      // 添加科研人员时，获取人员列表
      this.getUserList(scope.id)
    },
    // 确定分配人员
    sureJoinedPeopleClick() {
      this.userSelectVisible = false
      this.$http.post('projectUser', {
        projectId: this.currentPeopleId,
        userIdList: this.joinedListUserId
      }).then(({ data: res }) => {
        this.$message({ type: 'success', message: '分配成功' })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-head-form {
  display: flex;
  // justify-content: space-between;
}
</style>