<template>
|
<div class="smsConfig-management">
|
<!-- 左侧栏 -->
|
<div class="sidecolumn">
|
<div class="sidecolumn-top">
|
<div class="top-wj">模板分类</div>
|
<div class="top-tj" @click="Newcategory">+添加</div>
|
</div>
|
<div class="center-ss">
|
<el-input
|
placeholder="请输入内容"
|
v-model="sidecolumnval"
|
class="input-with-select"
|
size="medium"
|
>
|
</el-input>
|
</div>
|
<div class="head-container" style="margin-top: 20px">
|
<el-tree
|
:data="deptOptions"
|
:props="defaultProps"
|
:expand-on-click-node="false"
|
:filter-node-method="filterNode"
|
ref="tree"
|
node-key="id"
|
default-expand-all
|
highlight-current
|
@node-click="handleNodeClick"
|
>
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span class="tree-node-label">{{ node.label }}</span>
|
<span v-if="data.id > 0">
|
<el-button
|
type="text"
|
icon="el-icon-delete"
|
circle
|
size="mini"
|
@click="() => remove(node, data)"
|
>
|
</el-button>
|
</span>
|
<span v-if="data.id > 0">
|
<el-button
|
type="text"
|
circle
|
size="mini"
|
@click="() => altertag(node, data)"
|
>
|
<span class="button-textxg">
|
<i class="el-icon-edit-outline"></i>
|
</span>
|
</el-button>
|
</span>
|
</span>
|
</el-tree>
|
</div>
|
</div>
|
|
<!-- 右侧数据 -->
|
<div class="leftvlue">
|
<div class="leftvlue-bg">
|
<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="98px"
|
>
|
<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="signature">
|
<el-input
|
v-model="queryParams.signature"
|
placeholder="请输入短信签名"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
|
<el-form-item label="启用状态" prop="isenable">
|
<el-select
|
v-model="queryParams.isenable"
|
placeholder="请选择状态"
|
clearable
|
style="width: 200px"
|
>
|
<el-option
|
v-for="item in statusOptions"
|
: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="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="templetname"
|
prop="templetname"
|
width="160"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="短信签名"
|
align="center"
|
key="signature"
|
prop="signature"
|
width="120"
|
/>
|
|
<el-table-column
|
label="模板内容"
|
align="center"
|
key="templetcontent"
|
prop="templetcontent"
|
width="280"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="模板类型"
|
align="center"
|
key="templettype"
|
prop="templettype"
|
width="120"
|
>
|
<template slot-scope="scope">
|
<dict-tag :options="typeOptions" :value="scope.row.templettype" />
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="启用状态"
|
align="center"
|
key="isenable"
|
prop="isenable"
|
width="100"
|
>
|
<template slot-scope="scope">
|
<dict-tag :options="statusOptions" :value="scope.row.isenable" />
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="备注"
|
align="center"
|
key="remark"
|
prop="remark"
|
width="180"
|
:show-overflow-tooltip="true"
|
/>
|
|
<el-table-column
|
label="创建时间"
|
align="center"
|
key="createTime"
|
prop="createTime"
|
width="160"
|
/>
|
|
<el-table-column
|
label="操作"
|
fixed="right"
|
align="center"
|
width="240"
|
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>
|
</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="categoryid">
|
<el-select
|
v-model="form.categoryid"
|
placeholder="请选择模板分类"
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in categoryOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="模板名称" prop="templetname">
|
<el-input
|
v-model="form.templetname"
|
placeholder="请输入模板名称"
|
maxlength="50"
|
/>
|
</el-form-item>
|
|
<el-form-item label="短信签名" prop="signature">
|
<el-input
|
v-model="form.signature"
|
placeholder="请输入短信签名（如：【丽水人民医院】）"
|
maxlength="20"
|
/>
|
</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="templettype">
|
<el-select
|
v-model="form.templettype"
|
placeholder="请选择模板类型"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in typeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="启用状态" prop="isenable">
|
<el-radio-group v-model="form.isenable">
|
<el-radio
|
v-for="item in statusOptions"
|
:key="item.value"
|
:label="item.value"
|
>{{ item.label }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
v-model="form.remark"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入备注信息"
|
maxlength="200"
|
show-word-limit
|
/>
|
</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.templetname }}</div>
|
</div>
|
<div class="preview-item">
|
<div class="preview-label">短信签名：</div>
|
<div class="preview-value">{{ previewData.signature }}</div>
|
</div>
|
<div class="preview-item">
|
<div class="preview-label">模板类型：</div>
|
<div class="preview-value">
|
<dict-tag :options="typeOptions" :value="previewData.templettype" />
|
</div>
|
</div>
|
<div class="preview-item">
|
<div class="preview-label">启用状态：</div>
|
<div class="preview-value">
|
<dict-tag :options="statusOptions" :value="previewData.isenable" />
|
</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 class="preview-item" v-if="previewData.remark">
|
<div class="preview-label">备注：</div>
|
<div class="preview-value">{{ previewData.remark }}</div>
|
</div>
|
</div>
|
</el-dialog>
|
|
<!-- 添加类别弹框 -->
|
<el-dialog title="类别编辑" width="30%" :visible.sync="dialogFormVisible">
|
<div style="text-align: center; margin-bottom: 20px">
|
<el-radio-group v-model="radio">
|
<el-radio-button label="主分类"></el-radio-button>
|
<el-radio-button label="子分类"></el-radio-button>
|
</el-radio-group>
|
</div>
|
<el-divider></el-divider>
|
<el-form :model="classifyform">
|
<el-form-item label="请选择模板大类" v-if="radio == '子分类'">
|
<el-select v-model="classifyform.pid" placeholder="请选择">
|
<el-option
|
v-for="item in deptOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="请输入类别名称">
|
<el-input v-model="classifyform.name" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="getDeptTree()">取 消</el-button>
|
<el-button type="primary" @click="submitsidecolumn">确 定</el-button>
|
</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: {},
|
// 类别弹框
|
dialogFormVisible: false,
|
// 类别form
|
classifyform: {},
|
// 主/子分类
|
radio: "主分类",
|
// 类别搜索
|
sidecolumnval: "",
|
// 树数据
|
deptOptions: [],
|
// 分类下拉选项
|
categoryOptions: [],
|
// 树props
|
defaultProps: {
|
children: "children",
|
label: "name",
|
},
|
// 状态选项
|
statusOptions: [
|
{ label: "启用", value: "0" },
|
{ label: "停用", value: "1" },
|
],
|
// 类型选项
|
typeOptions: [
|
{ label: "验证码", value: "0" },
|
{ label: "通知", value: "1" },
|
{ label: "营销", value: "2" },
|
{ label: "随访", value: "3" },
|
],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
// 表单
|
form: {},
|
// 表单校验
|
rules: {
|
templetname: [
|
{ required: true, message: "请输入模板名称", trigger: "blur" },
|
],
|
templetcontent: [
|
{ required: true, message: "请输入模板内容", trigger: "blur" },
|
],
|
signature: [
|
{ required: true, message: "请输入短信签名", trigger: "blur" },
|
],
|
isenable: [
|
{ required: true, message: "请选择启用状态", trigger: "change" },
|
],
|
},
|
};
|
},
|
watch: {
|
// 监听类别搜索
|
sidecolumnval(val) {
|
this.$refs.tree.filter(val);
|
},
|
},
|
created() {
|
this.getList();
|
this.getDeptTree();
|
},
|
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 = {
|
isenable: "0",
|
templettype: "1",
|
};
|
// 如果有树选中分类，默认带入
|
if (this.queryParams.categoryid) {
|
this.form.categoryid = this.queryParams.categoryid;
|
}
|
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;
|
});
|
},
|
|
/** 提交表单 */
|
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(() => {});
|
},
|
|
// 表单重置
|
reset() {
|
this.form = {
|
templetid: undefined,
|
templetname: undefined,
|
signature: undefined,
|
templetcontent: undefined,
|
templettype: "1",
|
isenable: "0",
|
categoryid: undefined,
|
remark: undefined,
|
};
|
this.resetForm("form");
|
},
|
|
/** 查询分类树 */
|
getDeptTree() {
|
// 模拟分类树数据 - 实际项目中应替换为真实API
|
this.deptOptions = [
|
{
|
id: 1,
|
name: "随访短信",
|
children: [
|
{ id: 11, name: "出院随访" },
|
{ id: 12, name: "复诊提醒" },
|
{ id: 13, name: "健康宣教" },
|
],
|
},
|
{
|
id: 2,
|
name: "通知短信",
|
children: [
|
{ id: 21, name: "预约通知" },
|
{ id: 22, name: "报告通知" },
|
],
|
},
|
{
|
id: 3,
|
name: "验证码",
|
children: [
|
{ id: 31, name: "登录验证" },
|
{ id: 32, name: "注册验证" },
|
],
|
},
|
];
|
this.categoryOptions = this.flattenTree(this.deptOptions);
|
},
|
|
/** 扁平化树数据用于下拉选择 */
|
flattenTree(tree) {
|
let result = [];
|
tree.forEach((item) => {
|
result.push({ id: item.id, name: item.name });
|
if (item.children && item.children.length) {
|
result = result.concat(item.children);
|
}
|
});
|
return result;
|
},
|
|
/** 筛选节点 */
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
|
/** 点击树节点 */
|
handleNodeClick(data) {
|
if (data.children && data.children.length) return;
|
this.queryParams.categoryid = data.id;
|
this.getList();
|
},
|
|
// 分类树-----------------------
|
/** 新建分类 */
|
Newcategory() {
|
this.classifyform = {};
|
this.radio = "主分类";
|
this.dialogFormVisible = true;
|
},
|
|
/** 修改分类 */
|
altertag(node, data) {
|
this.dialogFormVisible = true;
|
if (data.children && data.children.length) {
|
this.radio = "主分类";
|
} else {
|
this.radio = "子分类";
|
}
|
this.classifyform = { ...data };
|
},
|
|
/** 提交分类 */
|
submitsidecolumn() {
|
if (this.classifyform.id) {
|
// 修改分类 - 实际项目中应替换为真实API
|
const index = this.deptOptions.findIndex(
|
(obj) => obj.id === this.classifyform.id
|
);
|
if (index > -1) {
|
this.deptOptions[index].name = this.classifyform.name;
|
this.$set(this.deptOptions, index, this.deptOptions[index]);
|
}
|
this.$modal.msgSuccess("修改成功");
|
this.dialogFormVisible = false;
|
return;
|
}
|
|
if (this.radio === "主分类" && this.classifyform.name) {
|
// 新增主分类
|
const newId = Math.max(...this.deptOptions.map((d) => d.id), 0) + 1;
|
this.deptOptions.push({
|
id: newId,
|
name: this.classifyform.name,
|
children: [],
|
});
|
this.$modal.msgSuccess("新增成功");
|
this.dialogFormVisible = false;
|
} else if (
|
this.radio === "子分类" &&
|
this.classifyform.pid &&
|
this.classifyform.name
|
) {
|
// 新增子分类
|
const parent = this.deptOptions.find(
|
(obj) => obj.id === this.classifyform.pid
|
);
|
if (parent) {
|
const newChildId =
|
Math.max(...parent.children.map((c) => c.id), parent.id * 10) + 1;
|
parent.children.push({
|
id: newChildId,
|
name: this.classifyform.name,
|
});
|
}
|
this.$modal.msgSuccess("新增成功");
|
this.dialogFormVisible = false;
|
} else {
|
this.$modal.msgError("请填写完整信息");
|
}
|
this.classifyform = {};
|
},
|
|
/** 删除分类 */
|
remove(node, data) {
|
if (data.children && data.children.length) {
|
this.$modal
|
.confirm(
|
'是否确认删除一级分类"' + data.name + '"？删除后其下分类将无法使用'
|
)
|
.then(() => {
|
const index = this.deptOptions.findIndex(
|
(obj) => obj.id === data.id
|
);
|
if (index > -1) {
|
this.deptOptions.splice(index, 1);
|
}
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
} else {
|
this.$modal
|
.confirm('是否确认删除分类项为"' + data.name + '"的数据项？')
|
.then(() => {
|
this.deptOptions.forEach((parent) => {
|
const idx = parent.children.findIndex(
|
(child) => child.id === data.id
|
);
|
if (idx > -1) {
|
parent.children.splice(idx, 1);
|
}
|
});
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.smsConfig-management {
|
display: flex;
|
}
|
|
.sidecolumn {
|
width: 380px;
|
min-height: 100vh;
|
text-align: center;
|
margin-top: 20px;
|
margin: 20px;
|
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);
|
|
.sidecolumn-top {
|
display: flex;
|
justify-content: space-between;
|
.top-wj {
|
font-size: 20px;
|
}
|
.top-tj {
|
font-size: 18px;
|
color: rgb(0, 89, 255);
|
cursor: pointer;
|
}
|
}
|
|
/* 核心：设置固定宽度，超出部分显示省略号 */
|
.tree-node-label {
|
display: inline-block;
|
max-width: 160px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
vertical-align: bottom;
|
}
|
|
/* 可选：鼠标悬停时取消限制，显示全文 */
|
.custom-tree-node:hover .tree-node-label {
|
max-width: none;
|
white-space: normal;
|
overflow: visible;
|
}
|
|
.center-ss {
|
margin-top: 30px;
|
.input-with-select {
|
height: 40px !important;
|
}
|
}
|
|
.bottom-fl {
|
margin-top: 30px;
|
display: center !important;
|
}
|
}
|
|
.leftvlue {
|
width: 80%;
|
margin-top: 20px;
|
padding: 30px;
|
background: #ffff;
|
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);
|
|
.mulsz {
|
font-size: 20px;
|
}
|
}
|
|
// 预览弹框样式
|
.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;
|
}
|
|
::v-deep .el-tree-node__content {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
height: 46px;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
|
::v-deep .el-tree {
|
position: relative;
|
cursor: default;
|
border-radius: 5px;
|
background: #eff8fe;
|
color: #606266;
|
border: 1px solid #bbe1fa;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
}
|
|
::v-deep
|
.el-tree--highlight-current
|
.el-tree-node.is-current
|
> .el-tree-node__content {
|
background-color: #7799fb;
|
color: #fff;
|
}
|
|
::v-deep .el-button--mini.is-circle {
|
padding: 7px;
|
margin: 0;
|
color: red;
|
}
|
|
// 按钮文字颜色
|
.button-text {
|
color: rgb(70, 204, 238);
|
}
|
|
.button-textxg {
|
color: rgb(35, 81, 233);
|
}
|
|
.button-textsc {
|
color: rgb(235, 23, 23);
|
}
|
</style>
|
