postdischarge-ui/src/views/manage/propaganda/index.vue
2024-07-10 11:13:51 +08:00

1752 lines
52 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container" ref="layout">
<el-row :gutter="20">
<el-col :span="5">
<DepartmentList
ref="DepartmentList"
@clickdepartment="clickdepartment"
:methods="'selectNumByDept'"
>
</DepartmentList>
</el-col>
<el-col :span="19" :xs="24">
<div ref="topform" class="form">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="创建时间" prop="">
<el-date-picker
v-model="queryParams.createTimeStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
@change="changecreateTimeStart"
:picker-options="pickerStartTime"
>
</el-date-picker>
-
<el-date-picker
v-model="queryParams.createTimeEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
@change="changecreateTimeEnd"
:picker-options="pickerEndTime"
>
</el-date-picker>
</el-form-item>
<el-form-item label="宣教类型" prop="propagandaType">
<el-select
v-model="queryParams.propagandaType"
placeholder="请选择"
>
<el-option
v-for="item in optionstype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="宣教来源" prop="hospitalAgencyId">
<el-select v-model="queryParams.hospitalAgencyId" filterable placeholder="请选择医院" style="width: 200px"
clearable>
<el-option v-for="item in hospitalAgencylist" :key="item.id" :label="item.agencyName" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="宣教状态" prop="propagandaStatus">
<el-select
v-model="queryParams.propagandaStatus"
placeholder="请选择"
>
<el-option
v-for="item in optionsstate"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<!-- <el-input
v-model="queryParams.diseaseTypeName"
placeholder="请输入所属病种名称"
clearable
@keyup.enter.native="handleQuery"
/> -->
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div ref="mb8" class="mb8">
<el-row :gutter="10" class="">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
:disabled="queryParams.hospitalAgencyId ? false : true"
v-hasPermi="['manage:propaganda:add']"
>新增</el-button
>
<el-button
type="warning"
plain
icon="el-icon-upload2"
size="mini"
@click="handleUpload"
>导入</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
</div>
<div ref="table">
<el-table
:max-height="maxTableHeight"
v-loading="loading"
:data="propagandaList"
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column
label="序号"
align="center"
prop="id"
type="index"
/>
<el-table-column
label="宣教名称"
align="center"
prop="propagandaTitle"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
label="宣教类型"
align="center"
prop="propagandaType"
>
<template slot-scope="scope">
{{
scope.row.propagandaType == "MEDICATION_KNOWLEDGE"
? "用药知识"
: ""
}}
{{
scope.row.propagandaType == "DISEASE_POPULARIZATION"
? "疾病科普"
: ""
}}
{{
scope.row.propagandaType == "SPORT_NUTRITION"
? "运动营养"
: ""
}}
{{
scope.row.propagandaType == "OTHER_KNOWLEDGE"
? "其他知识"
: ""
}}
{{
scope.row.propagandaType == "CUSTOMIZED_CONTENT"
? "定制内容"
: ""
}}
</template>
</el-table-column>
<el-table-column
label="宣教ID"
align="center"
prop="propagandaCode"
:show-overflow-tooltip="true"
/>
<el-table-column
label="宣教状态"
align="center"
prop="propagandaStatus"
>
<template slot-scope="scope">
{{
scope.row.propagandaStatus == "CREATE_PROCESS" ? "创作中" : ""
}}
{{
scope.row.propagandaStatus == "CREATE_COMPLETE"
? "创作完成"
: ""
}}
{{ scope.row.propagandaStatus == "IN_REVIEW" ? "审核中" : "" }}
{{ scope.row.propagandaStatus == "APPROVED" ? "审核通过" : "" }}
{{
scope.row.propagandaStatus == "REVIEW_FAILED"
? "审核不通过"
: ""
}}
<div></div>
</template>
</el-table-column>
<el-table-column
label="宣教来源"
align="center"
prop="hospitalAgencyName"
/>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
/>
<el-table-column
label="更新时间"
align="center"
prop="updateTime"
/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="300%"
>
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-zoom-in"
size="mini"
@click="Preview(scope.row)"
>预览</el-button
>
<el-button
type="text"
icon="el-icon-tickets"
size="mini"
@click="copyUrl(scope.row)"
>复制</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-aim"
v-if="scope.row.propagandaStatus == 'CREATE_COMPLETE'"
@click="examine(scope.row)"
>审核</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['manage:propaganda:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['manage:propaganda:remove']"
>删除</el-button
>
<!-- <el-button
size="mini"
type="text"
icon="el-icon-copy-document"
@click="copylink(scope.row)"
>复制链接</el-button
> -->
</template>
</el-table-column>
</el-table>
</div>
<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" /> -->
<myPagination
v-show="total > 0"
:total="total"
:pageSize="queryParams.pageSize"
:indexFromWrap="queryParams.pageNum"
@updateCPage="updateCPage"
></myPagination>
</el-col>
</el-row>
<!-- 添加或修改患者宣教信息对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="1000px"
append-to-body
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
:inline="true"
>
<el-form-item label="宣教标题" prop="propagandaTitle">
<el-input
v-model="form.propagandaTitle"
placeholder="请输入宣教标题"
/>
</el-form-item>
<el-form-item label="宣教ID" prop="propagandaCode">
<el-input
v-model="form.propagandaCode"
placeholder="请输入宣教ID"
onKeyUp="value=value.replace(/[\W]/g,'')"
/>
</el-form-item>
<el-form-item label="宣教类型" prop="propagandaType">
<el-select
v-model="form.propagandaType"
placeholder="请选择"
style="width: 206px"
>
<el-option
v-for="item in optionstype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="医院名称" prop="hospitalAgencyId">
<el-select v-model="form.hospitalAgencyId" filterable placeholder="请选择医院" style="width: 208px" clearable
@change="changehospitalAgency">
<el-option v-for="item in hospitalAgencylist" :key="item.id" :label="item.agencyName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="科室名称" prop="departmentId">
<el-select v-model="form.departmentName" filterable placeholder="请选择科室" style="width: 208px" clearable
@change="changeDepartment" @focus="onBlur">
<el-option v-for="item in Departmentdata" :key="item.id" :label="item.departmentName" :value="item.id">
</el-option>
</el-select>
</el-form-item>-->
<el-form-item label="科室名称" prop="departmentId">
<el-button
type=""
@click="clickinnerVisible()"
:style="
form.departmentName == '请选择科室' ? 'color: #c0c4cc;' : ''
"
style="
width: 206px;
text-align: left;
height: 36px;
overflow: hidden;
"
>{{ form.departmentName }}</el-button
>
</el-form-item>
<el-form-item label="病种名称" prop="diseaseTypeName">
<el-button
type=""
@click="clickdisease()"
:style="
form.diseaseTypeName == '请选择病种' ? 'color: #c0c4cc;' : ''
"
style="
width: 206px;
text-align: left;
height: 36px;
overflow: hidden;
"
>{{ form.diseaseTypeName }}</el-button
>
</el-form-item>
<el-form-item label="语音播报" prop="voicebroadcast">
<el-input
v-model="form.voicebroadcast"
type="textarea"
style="width: 206px"
placeholder="请输入语音播报"
/>
</el-form-item>
<el-form-item label="添加封面" prop="propagandaCoverPath">
<stationAcatar
v-if="open"
@imgUrl="imgUrl"
:img="form.propagandaCoverPath"
:type="'propagandaCoverUrl'"
/>
</el-form-item>
<el-form-item label="素材选择" prop="imgPath">
<div class="propagandaselect" @click="material" v-if="!form.imgPath">
<div class="add">+</div>
</div>
<img
@click="material"
class="propagandaselect"
:src="baseUrl + form.imgPath"
alt=""
v-else-if="
form.imgPath && querymaterial.materialsType == 'IMAGE_TEXT'
"
/>
<video
@click="material"
style="height: 200px; width: 300px"
v-else-if="form.imgPath && querymaterial.materialsType == 'VIDEO'"
ref="myVideo"
:src="baseUrl + form.imgPath"
controls
></video>
</el-form-item>
<el-form-item
label="文章摘要"
prop="articleSummary"
class="articleSummary"
>
<el-input
v-model="form.articleSummary"
type="textarea"
style="width: 800px"
placeholder="请输入文章摘要"
maxlength="300"
/>
</el-form-item>
<el-form-item label="正文内容" prop="propagandaContent">
<editor
v-model="form.propagandaContent"
:min-height="192"
style="width: 800px"
/>
<!-- <editor
v-model="form.propagandaContent"
:min-height="192"
style="width: 800px"
/> -->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 科室弹框 -->
<el-dialog
title=""
:visible.sync="innerVisibleshow"
width="1000px"
append-to-body
:before-close="innerVisiblecancel"
>
<el-form
ref="queryForm"
:model="informationqueryParams"
:rules="rules"
label-width="80px"
:inline="true"
>
<el-form-item label="科室名称" prop="departmentName" label-width="120">
<el-input
v-model="informationqueryParams.departmentName"
placeholder="请输入科室名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="informationInfoinfo"
>搜索</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="addresetQuerylist"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table
:data="infolist"
@cell-dblclick="nurseclick"
v-loading="loading"
>
<el-table-column label="请选择" width="100" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 15px; height: 15px"
v-if="form.departmentId == scope.row.id"
circle
@click="nurseclick(scope.row)"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="nurseclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="departmentName"
label="科室名称"
align="center"
:show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
<myPagination
v-show="totaldepartment > 0"
:total="totaldepartment"
:pageSize="informationqueryParams.pageSize"
:indexFromWrap="informationqueryParams.pageNum"
@updateCPage="updateCPagetwo"
></myPagination>
<!-- <pagination v-show="totaldepartment > 0" :total="totaldepartment" :page.sync="informationqueryParams.pageNum"
:limit.sync="informationqueryParams.pageSize" @pagination="informationInfoinfo" /> -->
</el-dialog>
<!-- 病种弹框 -->
<el-dialog
title=""
:visible.sync="diseaseshowst"
width="1000px"
append-to-body
:before-close="canceldiseases"
>
<el-form
ref="queryForm"
:model="querydisease"
:rules="rules"
label-width="80px"
:inline="true"
>
<el-form-item label="病种名称" prop="diseaseTypeName" label-width="120">
<el-input
v-model="querydisease.diseaseTypeName"
placeholder="请输入病种名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="infodisease"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetdisease"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table
:data="listdisease"
@cell-dblclick="nurseclickdisease"
v-loading="loading"
>
<el-table-column label="请选择" width="100" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 15px; height: 15px"
v-if="form.diseaseTypeId == scope.row.id"
circle
@click="nurseclickdisease(scope.row)"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="nurseclickdisease(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="diseaseTypeName"
label="病种名称"
align="center"
:show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
<!-- <pagination v-show="diseasetotal > 0" :total="diseasetotal" :page.sync="querydisease.pageNum"
:limit.sync="querydisease.pageSize" @pagination="infodisease" /> -->
<myPagination
v-show="diseasetotal > 0"
:total="diseasetotal"
:pageSize="querydisease.pageSize"
:indexFromWrap="querydisease.pageNum"
@updateCPage="updateCPagethree"
></myPagination>
</el-dialog>
<!-- 审核弹框 -->
<el-dialog
title="提示"
:visible.sync="dialogexamine"
width="30%"
:before-close="handleClose"
center
>
<span style="font-size: 18px; margin-left: 55px">是否同意审核?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelamine">同意</el-button>
<el-button type="primary" @click="submitamine">不同意</el-button>
</span>
</el-dialog>
<!-- 预览弹框 -->
<el-dialog
title="预览"
:visible.sync="dialogview"
width="50%"
:before-close="handleview"
>
<div class="titletop">文章模板:{{ formview.propagandaTitle }}</div>
<div class="bodytop">
<div class="titledata">{{ formview.propagandaTitle }}</div>
<!-- <div class="audiotop">
<audio controls="controls" ref="audio"></audio>
</div> -->
<div>
<img :src="baseUrl + formview.propagandaCoverPath" alt="" />
<div class="know">知识卡片</div>
<div class="knowlist">
<Editorxj v-model="formview.propagandaContent" :min-height="192" />
</div>
</div>
</div>
</el-dialog>
<!-- 素材选择弹框 -->
<el-dialog
title="请选择素材"
:visible.sync="dialogmaterial"
width="900px"
:before-close="materialClose"
>
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="素材名称" prop="materialsName">
<el-input
v-model="querymaterial.materialsName"
placeholder="请输入素材名称"
clearable
@keyup.enter.native="handleQuerysc"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuerysc"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuerysc"
>重置</el-button
>
</el-form-item>
</el-form>
<el-tabs
v-model="querymaterial.materialsType"
type="card"
@tab-click="handleClick"
>
<el-tab-pane label="图片" name="IMAGE_TEXT"></el-tab-pane>
<el-tab-pane label="视频" name="VIDEO"></el-tab-pane>
</el-tabs>
<div class="bodytopxj">
<div class="bodylist" v-for="item in materialsList" :key="item.id">
<!-- <el-checkbox
v-model="item.checked"
@change="changecheck($event, item)"
></el-checkbox> -->
<div @click.stop="viewshow(item)">
<img
:src="baseUrl + item.materialsFilePath"
alt=""
v-if="item.materialsFilePath && !item.videoCoverFilePath"
/>
<img
:src="baseUrl + item.videoCoverFilePath"
alt=""
v-if="item.videoCoverFilePath && item.materialsFilePath"
/>
<div class="texttitle">{{ item.materialsName }}</div>
<div class="dataliat">
创建人/创建时间:<span>{{ item.createBy }}</span
>/<span>{{ item.createTime }}</span>
</div>
<!-- <div class="dataliat">素材来源:</div> -->
<!-- <div class="dataliat">标签:暂无</div> -->
<div
class="dataliat bq"
v-if="
item.indications ||
item.drugName ||
item.applicableDiseases ||
item.surgicalName ||
item.inspectionItems ||
item.checkItems
"
>
标签:
<span v-if="item.indications">{{ item.indications }}</span>
<span v-if="item.drugName">{{ item.drugName }}</span>
<span v-if="item.applicableDiseases"
>{{ item.applicableDiseases }}</span
>
<span v-if="item.surgicalName">{{ item.surgicalName }}</span>
<span v-if="item.inspectionItems"
>{{ item.inspectionItems }}</span
>
<span v-if="item.checkItems">{{ item.checkItems }}</span>
</div>
<div class="dataliat bq" v-else>标签:暂无</div>
</div>
<div class="label" @click.stop="labelchange(item)">加到文章</div>
</div>
</div>
<!-- <pagination v-show="totalmaterial > 0" :total="totalmaterial" :page.sync="querymaterial.pageNum"
:limit.sync="querymaterial.pageSize" @pagination="getmaterial" /> -->
<myPagination
v-show="totalmaterial > 0"
:total="totalmaterial"
:pageSize="querymaterial.pageSize"
:indexFromWrap="querymaterial.pageNum"
@updateCPage="updateCPagefour"
></myPagination>
</el-dialog>
<!-- 预览弹框 -->
<el-dialog title="预览" :visible.sync="openview" width="60%">
<div class="viewbody">
<div class="left">
<video
v-if="querymaterial.materialsType == 'VIDEO'"
ref="myVideo"
:src="baseUrl + viewform.materialsFilePath"
controls
></video>
<img
:src="baseUrl + viewform.materialsFilePath"
alt=""
v-if="querymaterial.materialsType == 'IMAGE_TEXT'"
/>
</div>
<div class="right">
<div class="nametitle">素材名称</div>
<div class="nameitem">{{ viewform.materialsName }}</div>
<div class="nametitle">创建人员</div>
<div class="nameitem">{{ viewform.createBy }}</div>
<div class="nametitle">创建时间</div>
<div class="nameitem">{{ viewform.createTime }}</div>
<div class="nametitle">素材摘要</div>
<div class="nameitem">{{ viewform.materialsAbstract }}</div>
<div class="nametitle">素材标签</div>
<div class="nameitem">适用症状:{{ viewform.indications }}</div>
<div class="nameitem">药物名称:{{ viewform.drugName }}</div>
<div class="nameitem">
适用疾病:{{ viewform.applicableDiseases }}
</div>
<div class="nameitem">手术名称:{{ viewform.surgicalName }}</div>
<div class="nameitem">检验项目:{{ viewform.inspectionItems }}</div>
<div class="nameitem">检查项目:{{ viewform.checkItems }}</div>
<div class="nameitem">人群:{{ viewform.crowName }}</div>
</div>
</div>
</el-dialog>
<!-- 导入弹框 -->
<el-dialog
title=""
:visible.sync="innerexport"
width="1000px"
append-to-body
:before-close="exportcancel"
>
<propagandaexport
@submit="submit"
ref="childComponent"
></propagandaexport>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitexport">确 定</el-button>
<el-button @click="innerexport = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listPropaganda, getPropaganda, delPropaganda, addPropaganda, updatePropaganda, selectNumByDept, copy, updateStatus } from "@/api/manage/propaganda";
import { listMaterials } from "@/api/manage/materials";
import { selectAgencyList, getDepartmentList } from "@/api/manage/selectAgencyList";
import stationAcatar from "../../system/stationAvatar/index.vue";
import Editorxj from "../../system/Editorxj/index.vue";
import { department, listDisease } from "@/api/manage/script";
import DepartmentList from '../../components/DepartmentList.vue'
import propagandaexport from '@/views/manage/components/propagandaexport.vue'
import { copyBaselnfo } from "@/api/system/exportinfo";
export default {
name: "Propaganda",
components: { stationAcatar, Editorxj, DepartmentList, propagandaexport },
data() {
//验证身份证
var isimgPath = (rule, value, callback) => {
if (!this.form.imgPath) {
callback(new Error("素材选择不能为空"));
} else {
callback();
}
};
return {
// 导入弹框
innerexport: false,
exportlist: [],
maxLength: 20000,
departmentName: null,
diseaseTypeName: null,
name: '',
departmentId: null,
count: '',//全部
DepartmentoList: [],//左侧数组
innerVisibleshow: false, //科室弹框
// 科室
informationqueryParams: {
pageNum: 1,
pageSize: 10,
departmentName: null,
},
infolist: [],
totaldepartment: 0,
diseaseshowst: false,//病种弹框
querydisease: {
pageNum: 1,
pageSize: 10,
diseaseTypeName: null,
departmentId: null,
},
listdisease: [],
diseasetotal: 0,
dialogexamine: false,//审核
dialogview: false,//预览
formview: {
articleSummary: null,
propagandaTitle: null,
},//预览数据
copyid: null,//复制id
examineid: null,//审核id
optionstype: [{
value: 'MEDICATION_KNOWLEDGE',
label: '用药知识'
}, {
value: 'DISEASE_POPULARIZATION',
label: '疾病科普'
}, {
value: 'SPORT_NUTRITION',
label: '运动营养'
}, {
value: 'OTHER_KNOWLEDGE',
label: '其他知识'
}, {
value: 'CUSTOMIZED_CONTENT',
label: '定制内容'
}],
value: '',
optionsstate: [{
value: 'CREATE_PROCESS',
label: '创作中'
}, {
value: 'CREATE_COMPLETE',
label: '创作完成'
}, {
value: 'IN_REVIEW',
label: '审核中'
}, {
value: 'APPROVED',
label: '审核通过'
}, {
value: 'REVIEW_FAILED',
label: '审核不通过'
}],
// 素材弹框
dialogmaterial: false,
// 素材信息表格数据
materialsList: [],
// 查询参数
querymaterial: {
pageNum: 1,
pageSize: 10,
materialsType: 'IMAGE_TEXT',
materialsName: null,
materialsStatus: null,
createTime: null,
},
totalmaterial: 0,
baseUrl: process.env.VUE_APP_BASE_API,
openview: false,
viewform: [],
//医院list
hospitalAgencylist: [],
Departmentdata: [],
value: '',
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 患者宣教信息表格数据
propagandaList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
patientId: null,
propagandaId: null,
departmentName: null,
createTimeStart: null,
createTimeEnd: null,
propagandaTitle: null,
propagandaType: null,
propagandaCode: null,
propagandaContent: null,
propagandaCoverPath: null,
articleSummary: null,
voicebroadcast: null,
diseaseTypeName: null,
propagandaLink: null,
propagandaBarcodePath: null,
},
// 表单参数
form: {
materialsInfoList: [],
},
maxTableHeight: undefined,
// 表单校验
rules: {
propagandaTitle: [
{ required: true, message: "宣教标题不能为空", trigger: "blur" }
],
hospitalAgencyId: [
{ required: true, message: "医院名称不能为空", trigger: "blur" }
],
departmentId: [
{ required: true, message: "科室名称不能为空", trigger: "blur" }
],
propagandaType: [
{ required: true, message: "宣教类型不能为空", trigger: "blur" }
],
propagandaCoverPath: [
{ required: true, message: "封面不能为空", trigger: "blur" }
],
// imgPath: [
// { required: true, message: "", validator: isimgPath, trigger: "blur" }
// ],
},
};
},
mounted() {
this.getMaxTableHeight()
this.screenChange()
},
computed: {
pickerStartTime() {
return {
disabledDate: (time) => {
if (this.queryParams.createTimeEnd) {
let edtTime = this.queryParams.createTimeEnd.replace(/-/g, "/");
return time.getTime() > new Date(edtTime);
}
},
};
},
pickerEndTime() {
return {
disabledDate: (time) => {
if (this.queryParams.createTimeStart) {
let startTime = this.queryParams.createTimeStart.replace(/-/g, "/");
return time.getTime() < new Date(startTime);
}
},
};
},
},
created() {
// this.getList();
// this.selectAgencyinfo();
},
watch: {
},
methods: {
submit(e) {
this.exportlist = e
},
// 导入确定按钮
submitexport() {
var obj = {
departmentId: this.queryParams.departmentId,
departmentName: this.departmentName,
type: 'PROPAGANDA',
sourceTemplateIds: this.exportlist,
}
copyBaselnfo(obj).then(response => {
this.$modal.msgSuccess("导入成功");
this.innerexport = false
this.$refs.DepartmentList.Departmentlist()
this.getList();
});
},
// 导入按钮
handleUpload() {
if (this.queryParams.departmentId) {
this.innerexport = true
if (this.exportlist.length > 0) {
this.$refs.childComponent.resetTable();
}
this.Nameinfo = this.departmentName
} else {
this.$modal.msgError("请先选择左侧科室");
}
},
// 弹框取消
exportcancel() {
this.innerexport = false
},
//接收科室列表传值
clickdepartment(item) {
this.queryParams.hospitalAgencyId = item.hospitalAgencyId
this.queryParams.hospitalAgencyName = item.hospitalAgencyName
this.queryParams.departmentId = item.itemid
this.departmentName = item.itemName
this.informationqueryParams.hospitalAgencyId = item.hospitalAgencyId
if (item.hospitalAgencyId) {
this.getList();
}
this.$forceUpdate()
},
// checkContentLength() {
// const regex = /^.{0,20000}$/; // 正则表达式匹配最多2万个字符
// if (!regex.test(this.form.propagandaContent)) {
// this.$message({
// type: "error",
// message: "已达到最大输入长度"
// });
// // this.errorMessage = '输入字符数不能超过2万个。';
// } else {
// this.form.propagandaContent= null;
// }
// },
//获取医院list
selectAgencyinfo() {
let query = {
nodeType: 'HOSPITAL',
}
selectAgencyList(query).then(res => {
this.hospitalAgencylist = res.data
})
},
// 医院
changehospitalAgency(e) {
this.form.hospitalAgencyName = this.hospitalAgencylist.find(f => f.id == e).agencyName
this.form.hospitalAgencyId = e
this.form.departmentName = ''
this.form.departmentId = ''
this.form.diseaseTypeName = '请选择病种'
this.form.diseaseTypeId = '';
let query = {
nodeType: 'DEPARTMENT',
hospitalAgencyId: e,
}
getDepartmentList(query).then(res => {
this.Departmentdata = res.data
})
},
// 科室点击事件
changeDepartment(e) {
this.form.departmentId = e
this.form.departmentName = this.Departmentdata.find(f => f.id == e).departmentName
this.form.diseaseTypeName = '请选择病种'
this.form.diseaseTypeId = '';
},
onBlur() {
if (!this.form.hospitalAgencyId) {
this.$modal.msgError("请先选择医院");
}
},
// 素材选择
material() {
this.dialogmaterial = true
this.querymaterial.materialsType = 'IMAGE_TEXT'
this.getmaterial()
},
// 关闭素材
materialClose() {
this.dialogmaterial = false
},
// 复选框点击事件
// changecheck(e, item) {
// this.ids = this.materialsList.map(item => item.checked ? item.id : undefined).filter(e => e)
// if (this.ids.length > 0) {
// this.multiple = false
// } else {
// this.multiple = true
// }
// },
// 图片/视频
handleClick(e) {
this.querymaterial.materialsType = e.name
this.getmaterial()
},
// 加到文章
labelchange(item) {
this.form.materialsInfoList = []
this.form.imgPath = item.materialsFilePath
this.form.materialsInfoList.push(item)
this.dialogmaterial = false
},
// 预览
viewshow(item) {
this.openview = true
this.viewform = item
},
/** 查询素材信息列表 */
getmaterial() {
this.loading = true;
this.querymaterial.params = {};
listMaterials(this.querymaterial).then(response => {
this.materialsList = response.rows;
this.totalmaterial = response.total;
this.loading = false;
});
},
// 开始时间
changecreateTimeStart(e) {
this.queryParams.createTimeStart = e
},
// 结束时间
changecreateTimeEnd(e) {
this.queryParams.createTimeEnd = e
},
// 复制
copyUrl(row) {
this.copyid = row.id
this.$confirm('确定复制该文章内容?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
copy(this.copyid).then(response => {
this.$message({
type: "success",
message: "复制成功"
});
this.getList()
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消复制'
});
});
},
// 复制链接
copylink() {
},
// 预览
Preview(row) {
const id = row.id || this.ids
getPropaganda(id).then(response => {
this.formview = response.data;
this.dialogview = true
});
},
// 关闭预览
handleview() {
this.dialogview = false
},
// 审核
examine(row) {
this.examineid = row.id
this.dialogexamine = true
},
// 审核同意按钮
cancelamine() {
var formexmine = {
id: this.examineid,
propagandaStatus: 'APPROVED'
}
updateStatus(formexmine).then(response => {
this.$message({
type: "success",
message: "审核通过"
});
this.getList()
});
this.dialogexamine = false
},
// 审核关闭按钮
handleClose() {
this.dialogexamine = false
},
// 审核不同意按钮
submitamine() {
var formexmine = {
id: this.examineid,
propagandaStatus: 'REVIEW_FAILED'
}
updateStatus(formexmine).then(response => {
this.$message({
type: "success",
message: "审核不通过"
});
this.getList()
});
this.dialogexamine = false
},
/** 查询患者宣教信息列表 */
getList() {
this.loading = true;
listPropaganda(this.queryParams).then(response => {
this.propagandaList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 点击科室
clickinnerVisible() {
this.innerVisibleshow = true;
this.informationInfoinfo();
},
// 科室列表
informationInfoinfo() {
department(this.informationqueryParams).then((response) => {
this.infolist = response.rows;
this.totaldepartment = response.total;
this.loading = false;
});
// this.informationqueryParams.page = 1;
},
// 科室名称重置
addresetQuerylist() {
this.informationqueryParams = {
pageNum: 1,
pageSize: 10,
};
this.informationInfoinfo();
},
innerVisiblecancel() {
this.innerVisibleshow = false;
},
// 科室名称圆点按钮
nurseclick(row) {
this.form.departmentId = row.id;
this.form.departmentName = row.departmentName;
this.departmentName = row.departmentName;
this.form.diseaseTypeId = '';
this.form.diseaseTypeName = '请选择病种';
this.innerVisibleshow = false;
},
// 病种列表
infodisease() {
listDisease(this.querydisease).then((response) => {
this.listdisease = response.rows;
this.diseasetotal = response.total;
this.loading = false;
});
},
// 点击病种
clickdisease() {
if (this.form.departmentName == '请选择科室') {
this.$modal.msgError("请先选择科室");
} else {
this.diseaseshowst = true;
this.querydisease.departmentId = this.form.departmentId
this.infodisease()
}
},
// 病种名称圆点按钮
nurseclickdisease(row) {
this.form.diseaseTypeId = row.id;
this.form.diseaseTypeName = row.diseaseTypeName;
this.diseaseshowst = false;
},
// 重置
resetdisease() {
this.querydisease = {
pageNum: 1,
pageSize: 10,
};
this.infodisease()
},
canceldiseases() {
this.diseaseshowst = false;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
imgPath: null,
materialsInfoList: [],
hospitalAgencyId: null,
id: null,
patientId: null,
propagandaId: null,
propagandaStatus: null,
departmentName: null,
propagandaTitle: null,
propagandaCode: null,
departmentId: null,
propagandaType: null,
propagandaCode: null,
propagandaContent: null,
propagandaCoverPath: null,
articleSummary: null,
voicebroadcast: null,
diseaseTypeName: null,
propagandaLink: null,
propagandaBarcodePath: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
handleQuerysc() {
this.querymaterial.pageNum = 1;
this.getmaterial();
},
resetQuerysc() {
this.querymaterial.materialsName = null
this.handleQuerysc()
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.createTimeEnd = null
this.queryParams.createTimeStart = null
this.informationqueryParams.hospitalAgencyId = JSON.parse(localStorage.getItem('user')).hospitalAgencyId
this.queryParams.hospitalAgencyId = JSON.parse(localStorage.getItem('user')).hospitalAgencyId
this.$refs.DepartmentList.resetQuery()
this.resetForm("queryForms");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
// this.selectAgencyinfo();
this.form.propagandaStatus = 'CREATE_COMPLETE'
this.form.diseaseTypeName = "请选择病种"
if (this.queryParams.departmentId) {
this.form.departmentName = this.departmentName
this.form.departmentId = this.queryParams.departmentId
} else {
this.form.departmentName = '请选择科室'
}
this.Departmentdata = []
this.title = "新增宣教";
this.open = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getPropaganda(id).then(response => {
this.form = response.data;
this.form.suitTaskTypeIds = response.data.suitTaskTypeIds
this.form.imgPath = response.data.materialsInfoList[0]?.materialsFilePath
this.querymaterial.materialsType = response.data.materialsInfoList[0]?.materialsType
this.open = true;
this.departmentName = response.data.departmentName
this.title = "修改患者宣教信息";
});
},
// 上传封面
imgUrl(imgUrl) {
this.form.propagandaCoverPath = imgUrl;
},
/** 提交按钮 */
submitForm() {
console.log(this.form, 'this.form')
this.form.hospitalAgencyId = this.queryParams.hospitalAgencyId
this.form.hospitalAgencyName = this.queryParams.hospitalAgencyName
if (this.form.propagandaContent && (this.form.propagandaContent.length - 7 > this.maxLength)) {
// if (this.form.propagandaContent.length - 7 > this.maxLength) {
this.$message({
type: "error",
message: "已达到最大输入长度"
});
// }
} else {
this.$refs["form"].validate(valid => {
if (valid) {
if (!this.form.diseaseTypeId) {
this.form.diseaseTypeName = ''
}
if (this.form.id != null) {
updatePropaganda(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.$refs.DepartmentList.Departmentlist()
this.open = false;
this.getList();
});
} else {
addPropaganda(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.$refs.DepartmentList.Departmentlist()
this.open = false;
this.getList();
});
}
}
});
}
},
updateCPage(index, size) {
this.queryParams.pageNum = index
this.queryParams.pageSize = size
this.getList();
},
updateCPagetwo(index, size) {
this.informationqueryParams.pageNum = index
this.informationqueryParams.pageSize = size
this.informationInfoinfo();
},
updateCPagethree(index, size) {
this.querydisease.pageNum = index
this.querydisease.pageSize = size
this.infodisease();
},
updateCPagefour(index, size) {
this.querymaterial.pageNum = index
this.querymaterial.pageSize = size
this.getmaterial();
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除该宣教信息?').then(function () {
return delPropaganda(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
this.$refs.DepartmentList.Departmentlist()
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('manage/propaganda/export', {
...this.queryParams
}, `propaganda_${new Date().getTime()}.xlsx`)
},
// 获取表格最高高度
getMaxTableHeight() {
const windowInnerHeight = window.innerHeight // 屏幕可视高度
const layoutDiv = this.$refs.layout
const formDiv = this.$refs.topform
const mb8Div = this.$refs.mb8
this.maxTableHeight =
windowInnerHeight - 134 -
this.getBoxPadding(layoutDiv) -
this.getBoxHeight(mb8Div) -
this.getBoxHeight(formDiv)
},
// 压缩图片函数 async function compressImage(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function (event) { const img = new Image(); img.onload = function () { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const maxWidth = 800; // 设置最大宽度 const scale = Math.min(maxWidth / img.width, 1); // 计算缩放比例 canvas.width = img.width * scale; canvas.height = img.height * scale; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); canvas.toBlob(resolve, 'image/jpeg', 0.7); // 转换为 Blob 格式并压缩质量 }; img.src = event.target.result; }; reader.readAsDataURL(blob); }); } // 将压缩后的图片插入到富文本编辑器中的方法 function insertImageIntoEditor(blob) { // 实现插入到富文本编辑器的逻辑,具体实现根据富文本编辑器的 API 进行调整 // 可以是将图片显示在编辑器中,或者将图片上传到服务器并在编辑器中插入链接等 }
// 屏幕resize监听
screenChange() {
// 屏幕resize监听事件一旦屏幕宽高发生变化就会执行resize
window.addEventListener('resize', this.getMaxTableHeight, true)
// 将屏幕监听事件移除
// 这步是必须的。离开页面时不移除,再返回,或者进入到别的有相同元素的页面会报错
// 或者将这里的方法直接写在beforeDestroy函数中也可以
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.getMaxTableHeight, true)
})
},
}
};
</script>
<style lang="scss" scoped>
.articleSummary {
::v-deep .el-textarea__inner {
height: 100px;
}
}
::v-deep .el-dialog__body {
padding-bottom: 60px !important;
}
::v-deep iframe {
width: 100%;
height: 500px;
}
.propagandaselect {
width: 100px;
height: 100px;
background: #fafafa;
.add {
color: #b6b6b7;
font-size: 22px;
line-height: 100px;
text-align: center; //水平居中
// margin: 0 auto;
}
}
.leftpro {
height: calc(100vh - 119px);
overflow: auto;
.name {
font-weight: 700;
margin-bottom: 10px;
}
.listitem {
width: 100%;
height: 50px;
border-bottom: 1px solid #dcdfe6;
.count {
display: inline-block;
position: relative;
// right: -172px;
left: 210px;
color: #a4a6aa;
top: -35px;
font-size: 13px;
}
.all {
height: 50px;
line-height: 50px;
padding-left: 13px;
}
.allactive {
background: #e8f4ff;
height: 50px;
line-height: 50px;
padding-left: 13px;
border-left: 3px solid #4d9de7;
}
}
}
.button {
display: inline-block;
position: relative;
left: 20px;
top: -11px;
}
.app-container {
padding: 20px 0 0 20px !important;
}
::v-deep .el-row {
height: 100% !important;
}
audio {
width: 350px;
// background: #4d9de7;
}
.titletop {
font-size: 16px;
font-weight: 700;
}
.bodytop {
position: relative;
top: 20px;
height: 500px;
overflow: auto;
border: 1px solid #e2e2e2;
.titledata {
margin: 30px 0px 15px 30px;
top: 14px;
font-size: 20px;
}
.audiotop {
margin: 10px 0px 10px 30px;
}
img {
// width: 100%;
// width: 362px;
// height: 127px;
margin: 0px 0px 0px 30px;
}
.know {
margin: 11px 0px 10px 30px;
font-size: 16px;
}
.knowlist {
margin: 10px 0px 10px 30px;
font-size: 16px;
}
}
.viewbody {
width: 100%;
height: 500px;
// background: #409eff;
display: flex;
.left {
overflow: auto;
width: 77%;
height: 500px;
// background: #989992;
video {
height: 500px;
width: 100%;
}
}
img {
// height: 100%;
// width: 100%;
}
.right {
width: 20%;
// background: red;
overflow: auto;
margin-left: 30px;
.nametitle {
font-size: 14px;
font-weight: 600;
}
.nameitem {
color: #959595;
margin: 13px;
}
}
}
.bodytopxj {
width: 100%;
display: flex;
white-space: wrap;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
// align-content: space-between;
.bodylist {
width: 31%;
height: 221px;
border: 2px solid #e2e3e5;
border-radius: 10px;
position: relative;
// margin-bottom: 10px;
margin: 6px;
.texttitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
margin: 5px 0px 5px 10px;
}
//
.dataliat {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px 0px 5px 10px;
font-size: 12px;
color: #989992;
}
.bq {
width: 155px;
}
img {
width: 100%;
height: 100px;
}
.label {
position: absolute;
right: 0px;
right: 18px;
color: #409eff;
bottom: 23px;
font-size: 13px;
}
}
}
</style>