<template>
|
<div class="smsConfig-management">
|
<div class="main-content">
|
<el-row :gutter="20">
|
<el-col :span="24" :xs="24">
|
<el-form
|
:model="queryParams"
|
ref="queryForm"
|
size="small"
|
:inline="true"
|
v-show="showSearch"
|
label-width="88px"
|
>
|
<el-form-item label="模板编号" prop="templetno">
|
<el-input
|
v-model="queryParams.templetno"
|
placeholder="请输入模板编号"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
|
<el-form-item label="模板名称" prop="templetname">
|
<el-input
|
v-model="queryParams.templetname"
|
placeholder="请输入模板名称"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
|
<el-form-item label="部门名称" prop="deptName">
|
<el-input
|
v-model="queryParams.deptName"
|
placeholder="请输入部门名称"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="medium"
|
@click="handleQuery"
|
>搜索</el-button
|
>
|
<el-button
|
icon="el-icon-refresh"
|
size="medium"
|
@click="resetQuery"
|
>重置</el-button
|
>
|
</el-form-item>
|
</el-form>
|
|
<el-divider></el-divider>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="el-icon-plus"
|
size="medium"
|
@click="handleAdd"
|
>新增</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="el-icon-delete"
|
size="medium"
|
:disabled="multiple"
|
@click="handleDelete"
|
>删除</el-button
|
>
|
</el-col>
|
</el-row>
|
|
<el-table
|
v-loading="loading"
|
:data="userList"
|
:border="true"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="50" align="center" />
|
|
<el-table-column
|
label="模板编号"
|
align="center"
|
key="templetno"
|
prop="templetno"
|
width="140"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="模板名称"
|
align="center"
|
key="templetname"
|
prop="templetname"
|
width="160"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="模板内容"
|
align="center"
|
key="templetcontent"
|
prop="templetcontent"
|
width="280"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="部门名称"
|
align="center"
|
key="deptName"
|
prop="deptName"
|
width="120"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="病区名称"
|
align="center"
|
key="wardName"
|
prop="wardName"
|
width="140"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="用户工号"
|
align="center"
|
key="userName"
|
prop="userName"
|
width="120"
|
/>
|
|
<el-table-column
|
label="用户昵称"
|
align="center"
|
key="nickName"
|
prop="nickName"
|
width="120"
|
/>
|
|
<el-table-column
|
label="是否上传"
|
align="center"
|
key="isupload"
|
prop="isupload"
|
width="90"
|
/>
|
|
<el-table-column
|
label="上传时间"
|
align="center"
|
key="uploadTime"
|
prop="uploadTime"
|
width="160"
|
/>
|
|
<el-table-column
|
label="操作"
|
fixed="right"
|
align="center"
|
width="200"
|
class-name="small-padding fixed-width"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="medium"
|
type="text"
|
@click="handleUpdate(scope.row)"
|
>
|
<span class="button-textxg">
|
<i class="el-icon-edit"></i>修改
|
</span>
|
</el-button>
|
<el-button
|
size="medium"
|
type="text"
|
@click="handlePreview(scope.row)"
|
>
|
<span class="button-text">
|
<i class="el-icon-view"></i>预览
|
</span>
|
</el-button>
|
<el-button
|
size="medium"
|
type="text"
|
@click="handleDelete(scope.row)"
|
>
|
<span class="button-textsc">
|
<i class="el-icon-edit"></i>删除
|
</span>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 添加/修改短信模板弹框 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
width="45%"
|
:close-on-click-modal="false"
|
>
|
<el-form
|
:model="form"
|
:rules="rules"
|
ref="formRef"
|
label-width="100px"
|
size="medium"
|
>
|
<el-form-item label="模板编号" prop="templetno">
|
<el-input
|
v-model="form.templetno"
|
placeholder="请输入模板编号"
|
maxlength="50"
|
/>
|
</el-form-item>
|
|
<el-form-item label="模板名称" prop="templetname">
|
<el-input
|
v-model="form.templetname"
|
placeholder="请输入模板名称"
|
maxlength="100"
|
/>
|
</el-form-item>
|
|
<el-form-item label="模板内容" prop="templetcontent">
|
<el-input
|
v-model="form.templetcontent"
|
type="textarea"
|
:rows="5"
|
placeholder="请输入短信模板内容"
|
maxlength="500"
|
show-word-limit
|
/>
|
</el-form-item>
|
|
<el-form-item label="科室" prop="deptCode">
|
<el-select
|
v-model="form.deptCode"
|
placeholder="请选择科室"
|
filterable
|
clearable
|
style="width: 100%"
|
@change="handleDeptChange"
|
>
|
<el-option
|
v-for="dept in departmentOptions"
|
:key="dept.value"
|
:label="dept.label"
|
:value="dept.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="病区" prop="wardCode">
|
<el-select
|
v-model="form.wardCode"
|
placeholder="请选择病区"
|
filterable
|
clearable
|
style="width: 100%"
|
@change="handleWardChange"
|
>
|
<el-option
|
v-for="ward in wardOptions"
|
:key="ward.value"
|
:label="ward.label"
|
:value="ward.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancelForm">取 消</el-button>
|
<el-button type="primary" @click="submitForm" :loading="submitLoading"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
|
<!-- 模板预览弹框 -->
|
<el-dialog title="短信模板预览" :visible.sync="previewVisible" width="40%">
|
<div class="preview-box">
|
<div class="preview-item">
|
<div class="preview-label">模板编号：</div>
|
<div class="preview-value">{{ previewData.templetno || "-" }}</div>
|
</div>
|
<div class="preview-item">
|
<div class="preview-label">模板名称：</div>
|
<div class="preview-value">{{ previewData.templetname || "-" }}</div>
|
</div>
|
<div class="preview-item">
|
<div class="preview-label">部门名称：</div>
|
<div class="preview-value">{{ previewData.deptName || "-" }}</div>
|
</div>
|
<div class="preview-item">
|
<div class="preview-label">病区名称：</div>
|
<div class="preview-value">{{ previewData.wardName || "-" }}</div>
|
</div>
|
|
<el-divider></el-divider>
|
<div class="preview-content">
|
<div class="preview-content-label">短信内容预览：</div>
|
<div class="preview-content-box">
|
{{ previewData.templetcontent || "暂无内容" }}
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import store from "@/store";
|
import {
|
listSmstemplet,
|
getSmstemplet,
|
addSmstemplet,
|
updateSmstemplet,
|
delSmstemplet,
|
} from "@/api/smartor/smstemplet";
|
|
export default {
|
name: "SmsConfig",
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 提交按钮loading
|
submitLoading: false,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 表格数据
|
userList: [],
|
// 弹框标题
|
dialogTitle: "",
|
// 弹框可见性
|
dialogVisible: false,
|
// 预览弹框
|
previewVisible: false,
|
// 预览数据
|
previewData: {},
|
// 科室选项
|
departmentOptions: [],
|
// 病区选项
|
wardOptions: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
// 表单
|
form: {},
|
// 表单校验
|
rules: {
|
templetname: [
|
{ required: true, message: "请输入模板名称", trigger: "blur" },
|
],
|
templetcontent: [
|
{ required: true, message: "请输入模板内容", trigger: "blur" },
|
],
|
},
|
};
|
},
|
computed: {
|
// 从 store getters 获取科室选项
|
computedDepartmentOptions() {
|
if (this.$store.getters.belongDepts) {
|
return this.$store.getters.belongDepts.map((dept) => ({
|
label: dept.deptName,
|
value: dept.deptCode,
|
}));
|
}
|
return [];
|
},
|
// 从 store getters 获取病区选项
|
computedWardOptions() {
|
console.log(
|
this.$store.getters.belongWards,
|
"this.$store.getters.belongWards"
|
);
|
|
if (this.$store.getters.belongWards) {
|
return this.$store.getters.belongWards.map((ward) => ({
|
label: ward.districtName,
|
value: ward.districtCode,
|
}));
|
}
|
return [];
|
},
|
},
|
created() {
|
this.getList();
|
this.departmentOptions = this.computedDepartmentOptions;
|
this.wardOptions = this.computedWardOptions;
|
},
|
methods: {
|
/** 查询列表 */
|
getList() {
|
this.loading = true;
|
listSmstemplet(this.queryParams).then((response) => {
|
this.userList = response.rows;
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map((item) => item.templetid);
|
this.single = selection.length != 1;
|
this.multiple = !selection.length;
|
},
|
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.dialogTitle = "新增短信模板";
|
this.dialogVisible = true;
|
this.form = {};
|
this.$nextTick(() => {
|
if (this.$refs.formRef) {
|
this.$refs.formRef.clearValidate();
|
}
|
});
|
},
|
|
/** 修改按钮操作 */
|
handleUpdate(row) {
|
this.dialogTitle = "修改短信模板";
|
this.dialogVisible = true;
|
const templetid = row.templetid || this.ids[0];
|
getSmstemplet(templetid).then((response) => {
|
this.form = response.data;
|
this.$nextTick(() => {
|
if (this.$refs.formRef) {
|
this.$refs.formRef.clearValidate();
|
}
|
});
|
});
|
},
|
|
/** 预览按钮操作 */
|
handlePreview(row) {
|
this.previewVisible = true;
|
const templetid = row.templetid;
|
getSmstemplet(templetid).then((response) => {
|
this.previewData = response.data;
|
});
|
},
|
|
/** 科室选择变化 - 自动填充科室名称 */
|
handleDeptChange(value) {
|
const selectedDept = this.departmentOptions.find(
|
(dept) => dept.value === value
|
);
|
if (selectedDept) {
|
this.form.deptName = selectedDept.label;
|
} else {
|
this.form.deptName = "";
|
}
|
},
|
|
/** 病区选择变化 - 自动填充病区名称 */
|
handleWardChange(value) {
|
const selectedWard = this.wardOptions.find(
|
(ward) => ward.value === value
|
);
|
if (selectedWard) {
|
this.form.wardName = selectedWard.label;
|
} else {
|
this.form.wardName = "";
|
}
|
},
|
|
/** 提交表单 */
|
submitForm() {
|
this.$refs.formRef.validate((valid) => {
|
if (valid) {
|
this.submitLoading = true;
|
if (this.form.templetid) {
|
// 修改
|
updateSmstemplet(this.form)
|
.then(() => {
|
this.$modal.msgSuccess("修改成功");
|
this.dialogVisible = false;
|
this.getList();
|
})
|
.finally(() => {
|
this.submitLoading = false;
|
});
|
} else {
|
// 新增
|
addSmstemplet(this.form)
|
.then(() => {
|
this.$modal.msgSuccess("新增成功");
|
this.dialogVisible = false;
|
this.getList();
|
})
|
.finally(() => {
|
this.submitLoading = false;
|
});
|
}
|
}
|
});
|
},
|
|
/** 取消表单 */
|
cancelForm() {
|
this.dialogVisible = false;
|
this.form = {};
|
this.$nextTick(() => {
|
if (this.$refs.formRef) {
|
this.$refs.formRef.clearValidate();
|
}
|
});
|
},
|
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
const templetids = row.templetid || this.ids.join(",");
|
this.$modal
|
.confirm('是否确认删除模板编号为"' + templetids + '"的数据项？')
|
.then(function () {
|
return delSmstemplet(templetids);
|
})
|
.then(() => {
|
this.getList();
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.smsConfig-management {
|
padding: 20px;
|
}
|
|
.main-content {
|
padding: 30px;
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
}
|
|
// 预览弹框样式
|
.preview-box {
|
padding: 10px 20px;
|
|
.preview-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 15px;
|
font-size: 15px;
|
|
.preview-label {
|
width: 100px;
|
text-align: right;
|
color: #606266;
|
font-weight: 500;
|
}
|
|
.preview-value {
|
flex: 1;
|
margin-left: 10px;
|
color: #303133;
|
}
|
}
|
|
.preview-content {
|
margin-bottom: 15px;
|
|
.preview-content-label {
|
color: #606266;
|
font-weight: 500;
|
margin-bottom: 10px;
|
font-size: 15px;
|
}
|
|
.preview-content-box {
|
padding: 15px;
|
background: #f5f7fa;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
min-height: 60px;
|
line-height: 1.8;
|
color: #303133;
|
word-break: break-all;
|
}
|
}
|
}
|
|
::v-deep .el-input--medium .el-input__inner {
|
height: 40px !important;
|
}
|
|
// 按钮文字颜色
|
.button-text {
|
color: rgb(70, 204, 238);
|
}
|
|
.button-textxg {
|
color: rgb(35, 81, 233);
|
}
|
|
.button-textsc {
|
color: rgb(235, 23, 23);
|
}
|
</style>
|
