280 lines
10 KiB
Vue
280 lines
10 KiB
Vue
<template>
|
||
<lay-container fluid="true" class="organization-box">
|
||
<div style="display: flex">
|
||
<div :style="{ width: isFold ? `0px` : `230px` }" class="left-tree">
|
||
<div v-if="!isFold">科室列表</div>
|
||
<lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" v-model:selectedKey="group_id"
|
||
:showLine="false" @node-click="handleClick">
|
||
<template #title="{ data }">
|
||
<span :class="group_id == data.id ? 'isChecked' : ''">
|
||
{{ data.name }}
|
||
</span>
|
||
</template>
|
||
</lay-tree>
|
||
<div class="isFold" @click="isFold = !isFold">
|
||
<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
|
||
<lay-icon v-else class="layui-icon-right"></lay-icon>
|
||
</div>
|
||
</div>
|
||
<div style="flex: 1; padding: 10px; overflow: auto">
|
||
<!-- table -->
|
||
<lay-card>
|
||
<lay-form>
|
||
<lay-row>
|
||
<lay-col :md="5">
|
||
<lay-form-item label="类型" label-width="80">
|
||
<lay-select v-model="ser.type" :show-search="true" placeholder="请选择" :allowClear="true">
|
||
<lay-select-option :value="1" label="月度"></lay-select-option>
|
||
<lay-select-option :value="2" label="季度"></lay-select-option>
|
||
<lay-select-option :value="3" label="年度"></lay-select-option>
|
||
</lay-select>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
<lay-col :md="5">
|
||
<lay-form-item label="时间" label-width="80">
|
||
<lay-date-picker type="year" v-model="yearmonth" placeholder="年"
|
||
allow-clear></lay-date-picker>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
<lay-col :md="5">
|
||
<lay-form-item label="考评对象" label-width="120">
|
||
<lay-input v-model="ser.nickname" placeholder="请输入考评对象"></lay-input>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
<lay-col :md="5">
|
||
<lay-form-item label-width="20">
|
||
<lay-button style="margin-left: 20px" type="primary" size="sm" @click="toSearch">
|
||
查询
|
||
</lay-button>
|
||
<lay-button size="sm" @click="toReset"> 重置</lay-button>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
</lay-row>
|
||
</lay-form>
|
||
</lay-card>
|
||
<lay-table :page="page" height="600px" :columns="columns" :loading="loading" :data-source="dataSource"
|
||
@change="change">
|
||
<template v-slot:type="{ row }">
|
||
<lay-tag v-if="row.type == 1" type="primary">月度</lay-tag>
|
||
<lay-tag v-if="row.type == 2" type="warm">季度</lay-tag>
|
||
<lay-tag v-if="row.type == 3" type="danger">年度</lay-tag>
|
||
<!-- <lay-tag v-if="row.scoringrecord_status == 4" type="danger">医院已评</lay-tag> -->
|
||
</template>
|
||
<template v-slot:group_evaluation="{ row }">
|
||
{{ row.group_evaluation ? row.group_evaluation : '未评价' }}
|
||
</template>
|
||
<template v-slot:operator="{ row }">
|
||
<lay-space>
|
||
<span style="color: #00A394;cursor: pointer" @click="getInfo(row, 2)">评价</span>
|
||
<span style="color: #00A394;cursor: pointer" @click="getInfo(row, 1)">详情</span>
|
||
</lay-space>
|
||
</template>
|
||
</lay-table>
|
||
</div>
|
||
</div>
|
||
<lay-layer v-model="addShow" title="月度评价填报" :shade="true" :area="['500px', '500px']" :btn="addButton">
|
||
<lay-container fluid="true" style="padding: 20px">
|
||
<div style="margin-bottom: 20px">填报月份：{{ addModel.term }}月</div>
|
||
<div style="margin-bottom: 20px">评价对象：{{ addModel.nickname }}</div>
|
||
<lay-form :pane="true">
|
||
<lay-form-item label="评价内容" prop="desc">
|
||
<lay-textarea :rows="10" placeholder="请输入评价内容"
|
||
v-model="formData.group_evaluation"></lay-textarea>
|
||
</lay-form-item>
|
||
</lay-form>
|
||
</lay-container>
|
||
</lay-layer>
|
||
<lay-layer v-model="infoShow" title="月度评价详情" :shade="true" :area="['700px', '700px']">
|
||
<lay-container fluid="true" style="padding: 20px">
|
||
<div style="margin-bottom: 20px">填报月份：{{ addModel.term }}月</div>
|
||
<div style="margin-bottom: 20px">考评对象：{{ addModel.nickname }}</div>
|
||
<div style="margin-bottom: 20px">评价时间：{{ addModel.selftime }}</div>
|
||
<div style="margin-bottom: 20px">我的评价：
|
||
<div v-html="addModel.self_evaluation"></div>
|
||
</div>
|
||
<div style="margin-bottom: 20px">科室：{{ addModel.group_name }}</div>
|
||
<div style="margin-bottom: 20px">评价时间：{{ addModel.grouptime?addModel.grouptime:'未评价' }}</div>
|
||
<div style="margin-bottom: 20px">科室评价：
|
||
<div style="display: inline-block;" v-html="addModel.group_evaluation?addModel.group_evaluation:'未评价'"></div>
|
||
</div>
|
||
</lay-container>
|
||
</lay-layer>
|
||
</lay-container>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { layer } from '@layui/layui-vue'
|
||
import {
|
||
getUserGroupNew,
|
||
monthlyEvaluationGroupIndex,
|
||
monthlyEvaluationGroupUpdate
|
||
} from "@/api/module/home";
|
||
import dayjs from "dayjs";
|
||
import { useUserStore } from '@/store/user';
|
||
import { useRoute } from 'vue-router'
|
||
const route = useRoute()
|
||
const userStore = useUserStore()
|
||
const ser = reactive({
|
||
type: 1,
|
||
nickname: '',
|
||
year: dayjs().year()
|
||
});
|
||
const toSearch = () => {
|
||
page.current = 1;
|
||
getGroupEvaluation();
|
||
}
|
||
const page = reactive({ current: 1, limit: 10, total: 1 })
|
||
const isFold = ref(false)
|
||
const yearmonth = ref(dayjs().format('YYYY'));
|
||
onMounted(() => {
|
||
getLeftList();
|
||
})
|
||
const type = ref(1);
|
||
const group_id = ref(1);
|
||
const data = ref([]);
|
||
const getLeftList = () => {
|
||
getUserGroupNew({}).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 1) {
|
||
data.value = res.data;
|
||
group_id.value = res.data[0].id;
|
||
getGroupEvaluation();
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2 })
|
||
}
|
||
})
|
||
}
|
||
const dataSource = ref([]);
|
||
const getGroupEvaluation = () => {
|
||
monthlyEvaluationGroupIndex({ 'group_id': group_id.value, ...ser}).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 1) {
|
||
dataSource.value = res.data;
|
||
}
|
||
})
|
||
}
|
||
const handleClick = (data) => {
|
||
console.log(data)
|
||
group_id.value = data.id;
|
||
getGroupEvaluation();
|
||
}
|
||
const loading = ref(false)
|
||
const columns = ref([
|
||
{ title: '时间', width: '80px', key: 'term', align: 'center' },
|
||
{ title: '考评对象', width: '100px', key: 'nickname', align: 'center' },
|
||
{ title: '部门', width: '120px', key: 'group_name', align: 'center' },
|
||
{ title: '自我评价', width: '100px', key: 'self_evaluation', align: 'center', ellipsisTooltip: true },
|
||
{ title: '科室评价', width: '100px', key: 'group_evaluation', customSlot: 'group_evaluation', align: 'center', ellipsisTooltip: true },
|
||
{ title: '类型', width: '100px', key: 'type', customSlot: 'type', align: 'center' },
|
||
{
|
||
title: '操作',
|
||
width: '180px',
|
||
customSlot: 'operator',
|
||
key: 'operator',
|
||
fixed: 'right', align: 'center'
|
||
}
|
||
])
|
||
const formData = reactive({
|
||
group_evaluation: '',
|
||
id: 0,
|
||
});
|
||
const addShow = ref(false);
|
||
const addModel = ref({});
|
||
const addType = ref(1);
|
||
const infoShow = ref(false);
|
||
const getInfo = (row, type) => {
|
||
formData.id = row.id;
|
||
console.log(row, type)
|
||
addModel.value = row;
|
||
addType.value = type;
|
||
if (type == 1) {
|
||
infoShow.value = true;
|
||
} else {
|
||
addShow.value = true;
|
||
}
|
||
}
|
||
const addButton = ref([
|
||
{
|
||
text: "确认",
|
||
callback: async () => {
|
||
var res = await monthlyEvaluationGroupUpdate(formData);
|
||
console.log(res)
|
||
if (res.code == 1) {
|
||
layer.msg(res.msg)
|
||
addShow.value = false;
|
||
getGroupEvaluation();
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2 })
|
||
}
|
||
}
|
||
},
|
||
{
|
||
text: "取消",
|
||
callback: () => {
|
||
addShow.value = false;
|
||
}
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<style>
|
||
.layui-table-header .layui-table-cell {
|
||
background-color: #ECF8FA !important;
|
||
}
|
||
|
||
.organization-box {
|
||
width: calc(100vw - 240px);
|
||
height: calc(100vh - 110px);
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.left-tree {
|
||
display: inline-block;
|
||
padding: 20px 15px 0 5px;
|
||
height: 1200px;
|
||
border-right: 1px solid #e6e6e6;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
/* todo layui-tree-entry 设置无效 */
|
||
.layui-tree-entry {
|
||
position: relative;
|
||
padding: 10px 0;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.isFold {
|
||
position: absolute;
|
||
top: 36%;
|
||
right: -10px;
|
||
width: 26px;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
border-radius: 13px;
|
||
background-color: #fff;
|
||
border: 1px solid #e6e6e6;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-input {
|
||
display: inline-block;
|
||
width: 98%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.isChecked {
|
||
display: inline-block;
|
||
background-color: #e8f1ff;
|
||
color: red;
|
||
}
|
||
|
||
.layui-tab-content {
|
||
padding: 0;
|
||
}
|
||
</style> |