postdischarge-ui/src/views/manage/materials/index.vue
2024-06-13 16:02:09 +08:00

682 lines
21 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">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="创建时间">
<el-date-picker v-model="daterangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<!-- <el-form-item label="素材状态" prop="materialsStatus">
<el-select
v-model="queryParams.materialsStatus"
placeholder="请选择素材状态"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="素材名称" prop="materialsName">
<el-input v-model="queryParams.materialsName" placeholder="请输入素材名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<!-- <el-form-item label="素材来源" prop="materialsName">
<el-select
v-model="queryParams.materialsName"
placeholder="请选择素材来源"
>
<el-option
v-for="item in optionsly"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</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>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['manage:materials:add']">新增素材</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete" :disabled="multiple"
v-hasPermi="['manage:materials:remove']">批量删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-tabs v-model="queryParams.materialsType" type="card" @tab-click="handleClick" style="flex: 1;">
<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="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改素材信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body v-if="open">
<el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline="true">
<el-form-item label="素材类型" prop="materialsType">
<el-radio v-model="form.materialsType" label="IMAGE_TEXT" @change="radioChange('IMAGE_TEXT')">图文</el-radio>
<el-radio v-model="form.materialsType" label="VIDEO" @change="radioChange('VIDEO')">视频</el-radio>
</el-form-item>
<br />
<el-form-item label="素材名称" prop="materialsName">
<el-input v-model="form.materialsName" placeholder="请输入素材名称" />
</el-form-item>
<br />
<el-form-item label="素材上传" prop="materialsFilePath" v-if="form.materialsType == 'IMAGE_TEXT'">
<stationAcatar @imgUrl="imgUrl" :img="form.materialsFilePath" :type="'materialsCoverUrl'" />
</el-form-item>
<el-form-item label="视频封面" prop="videoCoverFilePath" v-if="form.materialsType == 'VIDEO'">
<stationAcatar @imgUrl="imgUrl3" :img="form.videoCoverFilePath" :type="'materialsCoverUrl'" />
</el-form-item>
<el-form-item label="视频素材上传" prop="materialsFilePath" v-if="form.materialsType == 'VIDEO'">
<trainingAvatar @imgUrl="imgUrl2" :tovideo="form.materialsFilePath" :type="'materialsVideoUrl'" />
</el-form-item>
<el-form-item label="素材摘要" prop="materialsAbstract">
<el-input style="width: 530px" v-model="form.materialsAbstract" type="textarea" placeholder="请输入内容" />
</el-form-item>
<div style="margin: 20px; font-weight: 700; font-size: 18px">
标签管理
</div>
<el-form-item label="适用症状" prop="indications">
<el-input v-model="form.indications" placeholder="请输入适用症状" />
</el-form-item>
<el-form-item label="适用疾病" prop="applicableDiseases">
<el-input v-model="form.applicableDiseases" placeholder="请输入适用疾病" />
</el-form-item>
<el-form-item label="药物名称" prop="drugName">
<el-input v-model="form.drugName" placeholder="请输入药物名称" />
</el-form-item>
<el-form-item label="手术名称" prop="surgicalName">
<el-input v-model="form.surgicalName" placeholder="请输入手术名称" />
</el-form-item>
<el-form-item label="检查项目" prop="checkItems">
<el-input v-model="form.checkItems" placeholder="请输入检查项目" />
</el-form-item>
<el-form-item label="检验项目" prop="inspectionItems">
<el-input v-model="form.inspectionItems" placeholder="请输入检验项目" />
</el-form-item>
<el-form-item label="人群名称" prop="crowName">
<el-select v-model="form.crowName" placeholder="请选择" style="width: 206px" @change="crowNamechange">
<el-option v-for="item in optionscrowName" :key="item.id" :label="item.crowdName" :value="item.id">
</el-option>
</el-select>
</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="openview" width="60%">
<div class="viewbody">
<div class="left">
<video v-if="queryParams.materialsType == 'VIDEO'" ref="myVideo" :src="baseUrl + viewform.materialsFilePath"
controls></video>
<img :src="baseUrl + viewform.materialsFilePath" alt="" v-if="queryParams.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>
</div>
</template>
<script>
import { listMaterials, getMaterials, delMaterials, addMaterials, updateMaterials, crowdInfo } from "@/api/manage/materials";
import stationAcatar from "../../system/stationAvatar/index.vue";
import trainingAvatar from "../../system/trainingAvatar/index.vue";
export default {
name: "Materials",
components: { stationAcatar, trainingAvatar },
dicts: ['crowd_type', 'materials_type', 'video_cover_type'],
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
videoState: false, // 视频播放状态
// 学时
studyTime: {
currentTime: 0, // 当前已学时长
duration: 0 // 总时长
},
timer: {}, // 定时器
pauseTimer: {}, // 暂停定时器
checked: false,
openview: false,//预览
viewform: [],
activeName: 'IMAGE_TEXT',
options: [{
value: 'ALL',
label: '全部'
}, {
value: 'LISTED',
label: '已上架'
}, {
value: 'NOT_LISTED',
label: '未上架'
}],
// 人群
optionscrowName: [
// {
// value: '选项1',
// label: '黄金糕'
// }, {
// value: '选项2',
// label: '双皮奶'
// },
],
optionsly: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
// 遮罩层
loading: true,
// 选中数组
ids: [],
selectedValues: [], // 存储选中的值
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 素材信息表格数据
materialsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 素材排序,值越小排序越靠前时间范围
daterangeCreateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
materialsType: 'IMAGE_TEXT',
materialsName: null,
materialsStatus: null,
createTime: null,
},
// 表单参数
form: {},
id: null,
show: false,
// 表单校验
rules: {
materialsName: [
{ required: true, message: "素材名称不能为空", trigger: "blur" },
],
materialsType: [
{ required: true, message: "素材类型不能为空", trigger: "blur" },
],
materialsFilePath: [
{ required: true, message: "素材上传不能为空", trigger: "blur" },
],
videoCoverFilePath: [
{ required: true, message: "视频封面不能为空", trigger: "blur" },
],
}
};
},
created() {
this.getList();
},
methods: {
// 图片/视频
handleClick(e) {
this.queryParams.materialsType = e.name
this.getList()
},
// 素材类型
radioChange(e) {
this.$refs.form.clearValidate();
if (e == 'VIDEO') {
if (this.title == '添加素材信息') {
this.form.materialsFilePath = null
this.form.videoCoverFilePath = null
} else if (this.title == '修改素材信息') {
getMaterials(this.id).then(response => {
if (response.data.videoCoverFilePath) {
this.form = response.data;
}
});
if (this.form.videoCoverFilePath) {
getMaterials(this.id).then(response => {
this.form = response.data;
});
}
else if (!this.form.videoCoverFilePath) {
this.reset()
// this.form.videoCoverFilePath=null
// this.form.materialsFilePath= null;
this.form.materialsType = 'VIDEO'
}
}
} else if (e == 'IMAGE_TEXT') {
if (this.title == '添加素材信息') {
this.form.materialsFilePath = null
this.form.videoCoverFilePath = null
} else if (this.title == '修改素材信息') {
getMaterials(this.id).then(response => {
if (!response.data.videoCoverFilePath) {
this.form = response.data;
}
});
if (!this.form.videoCoverFilePath) {
getMaterials(this.id).then(response => {
this.form = response.data;
});
}
else if (this.form.videoCoverFilePath) {
this.reset()
this.form.materialsType = 'IMAGE_TEXT'
}
}
}
},
// 素材上传
imgUrl(imgUrl) {
this.form.materialsFilePath = imgUrl;
},
// 视频
imgUrl2(imgUrl) {
// this.form.materialsFilePath = process.env.VUE_APP_BASE_API + imgUrl;
this.form.materialsFilePath = imgUrl;
},
// 视频封面
imgUrl3(imgUrl) {
this.form.videoCoverFilePath = imgUrl;
},
// 复选框点击事件
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
}
},
// 预览
viewshow(item) {
this.openview = true
this.viewform = item
},
getcrowdInfo() {
crowdInfo().then(response => {
this.optionscrowName = response.data
})
},
// 人群点击事件
crowNamechange(e) {
this.form.crowName = this.optionscrowName.find(f => f.id == e).crowdName
this.form.crowdId = e
},
/** 查询素材信息列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
listMaterials(this.queryParams).then(response => {
this.materialsList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
materialsName: null,
materialsType: "IMAGE_TEXT",
materialsOption: 'MANUAL_UPLOAD',
materialsFilePath: null,
videoCoverType: null,
videoCoverFilePath: null,
materialsAbstract: null,
indications: null,
applicableDiseases: null,
drugName: null,
surgicalName: null,
checkItems: null,
inspectionItems: null,
crowdId: null,
crowName: null,
materialsStatus: "0",
materialsRemark: null,
materialsSort: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
if (this.daterangeCreateTime?.length > 0) {
this.queryParams.createTimeStart = this.daterangeCreateTime[0]
this.queryParams.createTimeEnd = this.daterangeCreateTime[1]
} else {
this.queryParams.createTimeStart = null
this.queryParams.createTimeEnd = null
}
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
console.log()
this.daterangeCreateTime = [];
this.queryParams = {
pageNum: 1,
pageSize: 10,
materialsType: 'IMAGE_TEXT',
materialsName: null,
materialsStatus: null,
createTimeStart: null,
createTimeEnd: null,
}
this.resetForm("queryForm");
// this.getList();
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.getcrowdInfo()
this.title = "添加素材信息";
},
/** 修改按钮操作 */
labelchange(item) {
this.reset();
this.open = true;
// const id = item.id || this.ids
this.id = item.id
getMaterials(this.id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改素材信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateMaterials(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMaterials(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.getList();
if (this.ids.length == 0) {
this.$modal.msgError("请先选择一条数据");
} else {
const ids = this.ids;
this.$modal.confirm('是否确认删除该素材信息?').then(function () {
return delMaterials(ids);
}).then(() => {
this.$modal.msgSuccess("删除成功");
// this.ids=[];
this.getList();
this.multiple = true
}).catch(() => { });
}
},
/** 导出按钮操作 */
handleExport() {
this.download('manage/materials/export', {
...this.queryParams
}, `materials_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox__inner {
position: absolute !important;
// top: -84px;
left: 8px;
}
::v-deep .el-textarea__inner {
height: 100px;
}
video {
height: 500px;
width: 100%;
}
.viewbody {
width: 100%;
height: 500px;
// background: #409eff;
display: flex;
.left {
overflow: auto;
width: 77%;
height: 500px;
// background: #989992;
}
img {
// height: 100%;
// width: 100%;
}
.right {
width: 20%;
overflow: auto;
// background: red;
margin-left: 30px;
.nametitle {
font-size: 14px;
font-weight: 600;
}
.nameitem {
color: #959595;
margin: 13px;
}
}
}
.bodytopxj {
flex: 20;
width: 100%;
display: flex;
white-space: wrap;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
// align-content: space-between;
.bodylist {
width: 19%;
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: 8px;
font-size: 13px;
}
}
}
</style>