postdischarge-ui/src/views/components/SearchForm.vue
2024-12-16 16:15:07 +08:00

1112 lines
32 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>
<Form
ref="form"
:label-width="labelWidth"
:size="size"
style="display: flex"
class="item-search-form"
>
<div
id="searchFilter"
ref="searchFilter"
:gutter="10"
style="display: flex; flex-wrap: wrap"
:style="{ width: widths + '%' }"
>
<slot></slot>
</div>
<div
style="width: 20%; text-align: right; padding-right: 18px"
:style="{
width:
this.$router.currentRoute.path == '/patient/Patientmanagement'
? '27%'
: '20%',
}"
>
<Button type="primary" @click="handleQuery" size="mini">搜索</Button>
<Button @click="handleReset" size="mini">重置</Button>
<el-button
type="warning"
plain
icon="el-icon-upload2"
size="mini"
@click="handleUpload"
v-if="patientUploadButtonVisible == 'true'"
>导入</el-button
>
<el-button
type="primary"
plain
size="mini"
@click="handleback"
v-if="this.$router.currentRoute.path == '/patient/ImportDetails'"
>返回</el-button
>
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-if="this.$router.currentRoute.path == '/task/Satisfactionsurvey'"
>导出</el-button
>
<Button
v-show="collapsiable"
type="text"
@click="shiftCollapsiable"
size="mini"
>
<span>
{{ fold ? "收起" : "展开" }}
<i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
</span>
</Button>
</div>
<!-- 导入添加-->
<el-dialog title="导入" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<div v-for="(item, index) in form.deptAliasVOS" :key="index">
<el-form-item required>
<template slot="label">
{{ item.deptAlias }}
</template>
<el-select
v-model="item.departmentName"
placeholder="请选择科室"
style="width: 208px"
@change="changeway($event, index)"
>
<el-option
v-for="item in form.departments"
:key="item.id"
:label="item.departmentName"
:value="item.departmentName"
>
</el-option>
</el-select>
<el-button
v-if="departmentsshow"
type="primary"
plain
style="margin-left: 8px"
@click="additem(item, index)"
>添加</el-button
>
</el-form-item>
</div>
</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="uploadopen"
width="400px"
append-to-body
>
<el-upload
drag
class="upload-demo"
ref="upload"
:action="action.url"
:headers="action.headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:on-success="handleAvatarSuccess"
:data="action.data"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip" style="line-height: 25px">
<div>
1.
<span
style="color: #1890ff; cursor: pointer"
@click="importTemplate"
>下载导入模板</span
>
</div>
<div>2.最大支持2MB的xls/xlsx文件</div>
<div>3.一次导入患者数量不能超过5000</div>
<el-checkbox v-model="isDistinct" style="font-size: 12px"
>自动去除当日重复记录</el-checkbox
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitUpload">确 定</el-button>
<el-button @click="uploadcancel">取 消</el-button>
</div>
</el-dialog>
<!-- 添加或修改科室信息对话框 -->
<el-dialog
title="添加"
:visible.sync="openadd"
width="1000px"
append-to-body
>
<el-form
ref="formadd"
:model="formadd"
:rules="rulesadd"
label-width="120px"
:inline="true"
>
<!-- <el-form-item label="上级科室id" prop="parentDepartmentId">
<el-input
v-model="form.parentDepartmentId"
placeholder="请输入上级科室id"
/>
</el-form-item>
<el-form-item label="所属机构id" prop="hospitalAgencyId">
<el-input v-model="form.hospitalAgencyId" placeholder="请输入所属机构id" />
</el-form-item>
<el-form-item label="所属机构名称" prop="agencyName">
<el-input
v-model="form.agencyName"
placeholder="请输入所属机构名称"
/>
</el-form-item> -->
<div class="nameinformation">基本信息</div>
<div class="content">
<el-form-item label="科室名称" prop="departmentName">
<el-input
maxlength="100"
v-model="formadd.departmentName"
placeholder="请输入科室名称"
/>
</el-form-item>
<el-form-item label="科室代码" prop="departmentCode">
<el-input
maxlength="30"
onKeyUp="value=value.replace(/[\W]/g,'')"
v-model="formadd.departmentCode"
placeholder="请输入科室代码"
/>
</el-form-item>
<el-form-item label="所属机构" prop="hospitalAgencyName">
<el-cascader
clearable
:props="{ checkStrictly: true }"
:options="treeOptions"
@change="change"
style="width: 205px; color: black"
v-model="formadd.hospitalAgencyIdtwo"
:show-all-levels="false"
:placeholder="
formadd.hospitalAgencyName ? formadd.hospitalAgencyName : ''
"
ref="cascader"
:key="isResouceShow"
></el-cascader>
</el-form-item>
<el-form-item label="节点类型" prop="nodeType">
<el-select
v-model="formadd.nodeType"
placeholder="请选择"
style="width: 205px"
clearable
>
<el-option
v-for="item in nodeTypeoptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="科室简称" prop="departmentAbbreviation">
<el-input
maxlength="100"
v-model="formadd.departmentAbbreviation"
placeholder="请输入科室简称"
/>
</el-form-item>
<el-form-item label="科室类型" prop="departmentType">
<el-select
v-model="formadd.departmentType"
placeholder="请选择"
style="width: 205px"
clearable=""
>
<el-option
v-for="item in departmentoptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="科室负责人id" prop="departmentPersonId">
<el-input
v-model="form.departmentPersonId"
placeholder="请输入科室负责人id"
/>
</el-form-item> -->
<el-form-item label="科室负责人姓名" prop="departmentPersonName">
<el-input
maxlength="20"
v-model="formadd.departmentPersonName"
placeholder="请输入科室负责人姓名"
/>
</el-form-item>
<el-form-item label="上级科室" prop="parentDepartmentId">
<el-select
v-model="formadd.parentDepartmentName"
placeholder="请选择"
style="width: 205px"
@change="changeparentDepartment"
clearable
>
<el-option
v-for="item in optionsparentDepartment"
:key="item.id"
:label="item.departmentName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</div>
<div class="nameinformation">扩展信息</div>
<div class="content">
<el-form-item label="提供服务类别" prop="provideServiceCategory">
<el-select
clearable
v-model="formadd.provideServiceCategory"
placeholder="请选择"
style="width: 205px"
>
<el-option
v-for="item in options"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="细分类别" prop="subdivisionCategoryId">
<el-select
v-model="formadd.subdivisionCategoryName"
placeholder="请选择"
style="width: 205px"
clearable
@change="optionsubdivision"
>
<el-option
v-for="item in optionsubdivisionCategory"
:key="item.subdivisionCategoryCode"
:label="item.subdivisionCategoryName"
:value="item.subdivisionCategoryCode"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="标准科室对照" prop="normDepartmentCompareId">
<el-select
v-model="formadd.normDepartmentCompareId"
placeholder="请选择"
style="width: 205px"
clearable
>
<el-option
v-for="item in compareList"
:key="item.departmentId"
:label="item.departmentName"
:value="item.departmentId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="编制床位数" prop="prepareBedsCount">
<el-input
maxlength="8"
onKeyUp="value=value.replace(/[\W]/g,'')"
v-model="formadd.prepareBedsCount"
placeholder="请输入编制床位数"
/>
</el-form-item>
<el-form-item label="科室电话" prop="departmentPhone">
<el-input
maxlength="12"
onKeyUp="value=value.replace(/[\W]/g,'')"
v-model="formadd.departmentPhone"
placeholder="请输入科室电话"
/>
</el-form-item>
<el-form-item label="科室邮箱" prop="departmentMail">
<el-input
maxlength="20"
v-model="formadd.departmentMail"
placeholder="请输入科室邮箱"
/>
</el-form-item>
<el-form-item label="成立日期" prop="establishDate">
<el-date-picker
clearable
v-model="formadd.establishDate"
type="date"
style="width: 205px"
value-format="yyyy-MM-dd"
placeholder="请选择成立日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="撤销日期" prop="revokeDate">
<el-date-picker
clearable
v-model="formadd.revokeDate"
type="date"
style="width: 205px"
value-format="yyyy-MM-dd"
placeholder="请选择撤销日期"
>
</el-date-picker>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFormadd">确 定</el-button>
<el-button @click="canceladd">取 消</el-button>
</div>
</el-dialog>
<!-- 手机号 -->
<el-dialog
title="查看"
:visible.sync="openphone"
width="900px"
append-to-body
>
<el-table v-loading="loading" :data="patientInfoList">
<el-table-column label="科室名称" align="center" prop="deptAlias" />
<el-table-column label="就诊时间" align="center" prop="visitDate" />
<el-table-column label="姓名" align="center" prop="patientName" />
<el-table-column
label="联系电话"
align="center"
prop="patientPhone"
width="120"
/>
<el-table-column label="年龄" align="center" prop="age" />
<el-table-column label="诊断" align="center" prop="mainDiagnosis" />
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancelphone"> </el-button>
</div>
</el-dialog>
<!-- 遮罩层 -->
<div class="mask" v-if="showMask">
<!-- 图片 -->
<div class="maskimg">
<div class="wrap">
<div class="progress-bar">
<div class="progress"></div>
<div class="inner" :style="{ '--left': progress + '%' }"></div>
<div class="runner" :style="{ '--left': progress + '%' }"></div>
</div>
</div>
<div class="text">导入中请稍等</div>
</div>
</div>
</Form>
</template>
<script>
import { Form, FormItem, Button } from 'element-ui'
import { faL, fas } from '@fortawesome/free-solid-svg-icons'
import { listCompare } from "@/api/system/compare";
import { listSubdivision } from "@/api/system/subdivision";
import { agencyList, getAgencytype } from "@/api/system/agency";
import { getToken } from "@/utils/auth";
import {
addDepartment,
getDepartmentList,
secondaryUpload,
} from "@/api/system/department";
export default {
name: 'SearchFilter',
components: { Form, FormItem, Button },
props: {
labelWidth: {
type: String,
default: '80px',
},
widths: {
type: Number,
default: 80,
},
labelWidths: {
type: Number,
default: 280,
},
size: {
type: String,
default: 'small',
},
patientUploadButtonVisible: {
type: String,
default: 'false'
},
query:{
type: Object,
default: () => ({})
},
},
data() {
return {
querlist:{},//导出
departmentsshow: false,//添加按钮
loading: false,
patientInfoList: [],
datalist: [],
openphone: false,
form: {},
uploadopen: false,
fileList: [],
isDistinct: true,//是否自动去重true表示去重
action: {
data: {
isDistinct: '',
},
headers: {
Authorization: "Bearer " + getToken(),
},
url: process.env.VUE_APP_BASE_API + "/manage/patientInfo/patientUpload",
},
open: false,
openadd: false,//添加弹框
formadd: {},//添加对象
collapsiable: false,
fold: false,
// 最大展示数默认3个超过则隐藏为0时不限制
maxShow: undefined,
rules: {
deptAliasVOS: {
departmentName: [
{ required: true, message: "1111111", trigger: "blur", }
]
},
},
treeOptions: [],
// 细分
optionsubdivisionCategory: [],
// 标准科室对照4
compareList: [],
option: [],
options: [],
optionsparentDepartment: [],
departmentoptions: [],
nodeTypeoptions: [],
isResouceShow: 1,
indexadd: undefined,
showMask: false,//遮罩层
progress: 0,
// 表单校验--添加
rulesadd: {
nodeType: [
{ required: true, message: "节点类型不能为空", trigger: "blur" },
],
hospitalAgencyName: [
{ required: true, message: "所属机构不能为空", trigger: "blur" },
],
departmentName: [
{ required: true, message: "科室名称不能为空", trigger: "blur" },
],
departmentCode: [
{ required: true, message: "科室代码不能为空", trigger: "blur" },
],
departmentPhone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的科室电话",
trigger: "blur",
},
],
departmentMail: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
},
}
},
mounted() {
// 通过最大显示个数控制展开/折叠
this.minShowCtrol()
this.$emit('fold', this.fold)
const currentRoute = this.$router.currentRoute;
console.log(currentRoute, 'currentRoute')
},
watch: {
query:{
handler(val) {
this.querlist=val
},
deep: true,
immediate: true,
},
'$store.state.app.sidebar.opened'(newVal, Val) {
if (newVal) {
const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
group[this.maxShow - 1].hidden = true
}
setTimeout(() => {
this.minShowCtrol()
}, 500);
}
},
methods: {
handleAvatarSuccess(response, file, fileList) {
console.log(response, file, fileList, 'response, file, fileList')
if (response.code == 500 && !response.data) {
this.$modal.msgError(response.msg);
} else if (response.code == 5002) {
this.openphone = true;
this.patientInfoList = response.data
} else if (response.code == 500 && response.data) {
if (response.data.departments) {
this.form = response.data
} else {
this.form.deptAliasVOS = response.data.deptAliasVOS
this.form.departments = []
this.departmentsshow = true
}
this.open = true;
}
else if (response.code == 200 && !response.data) {
this.$modal.msgSuccess(response.msg);
this.$emit('handleRules')
} else if (response.code == 200 && response.data) {
this.form = response.data
this.open = true;
}
this.uploadcancel();
this.fileList = [];
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
},
//导入相关的方法
submitUpload() {
if (this.isDistinct == true) {
this.action.data.isDistinct = 1
} else {
this.action.data.isDistinct = 0
}
this.$refs.upload.submit();
},
//取消导入
uploadcancel() {
this.uploadopen = false;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"/system/importDownload/downloadTemplate?fileType=patientInfoImport",
{},
`门诊随访记录 - 未随访.xlsx`
);
},
// 列表取消
cancelphone() {
this.openphone = false;
},
// 返回
handleback() {
this.$router.push({
path: "/patient/patientinfoimport",
});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"/manage/signnode/export ",
{
...this.querlist,
},
`外呼记录_${new Date().getTime()}.xlsx`
);
},
// 导入
handleUpload() {
// this.openphone=true;
this.uploadopen = true;
this.isDistinct = true;
this.fileList = [];
this.form = {};
// this.showMask = true;
// this.progress = 0;
// this.timer = setInterval(() => {
// if (this.progress < 99) {
// this.progress += 5;
// } else {
// clearInterval(this.timer); // 停止计时器
// // 延时 1 秒后执行关闭遮罩或其他操作
// // setTimeout(() => {
// // this.showMask = false;
// // // 关闭遮罩或执行其他操作
// // }, 1000);
// }
// }, 2000); // 每 900 毫秒0.9秒)增加 1% 进度
// this.$refs.form.resetFields();
// this.open = true;
},
// 取消按钮
cancel() {
this.open = false;
// this.reset();
},
// 添加
additem(item, index) {
this.indexadd = index
this.reset();
this.gettreelist();
this.infocompare();
this.getinfolist();
this.getinfo();
this.info();
this.infodepartment();
this.infolist();
this.openadd = true
if (localStorage.getItem('roleKey') != 'admin') {
this.getLeafIds(this.treeOptions)
}
console.log(item, index, 'item')
// this.$emit('additem',item,index)
},
// 点击事件
changeway(e, index) {
console.log(e, index, 'e')
// this.$set(this.form.deptAliasVOS[this.indexadd], 'departmentName', this.formadd.departmentName)
// this.form.deptAliasVOS[index].departmentName = this.form.departments.find(f => f.id == e).departmentName
// this.form.deptAliasVOS[index].departmentId = e
this.$nextTick(() => {
this.$forceUpdate()
})
},
getLeafIds(nodes) {
console.log(nodes, ';node')
this.formadd.hospitalAgencyIdtwo = JSON.parse(localStorage.getItem('user')).hospitalAgencyId;
let leafIds = [];
nodes.forEach(node => {
if (node.id == this.formadd.hospitalAgencyIdtwo) {
this.formadd.hospitalAgencyName = node.label;
} else {
if (node.children) {
// 如果有子节点递归调用getLeafIds
leafIds = leafIds.concat(this.getLeafIds(node.children));
} else {
// 如果没有子节点取当前节点的id
leafIds.push(node.id);
}
}
});
return leafIds;
},
// 所属机构
gettreelist() {
agencyList().then((res) => {
// 接口请求
this.treeOptions = res.data.map((item) => {
return { value: item.id, ...item };
});
});
},
// 所属机构
change(e) {
console.log(this.formadd.hospitalAgencyIdtwo)
if (e) {
this.formadd.hospitalAgencyId = e[e.length - 1];
if (this.formadd.hospitalAgencyId) {
const arr = this.$refs["cascader"].getCheckedNodes()[0].pathLabels;
this.formadd.hospitalAgencyName = arr.slice(-1).join(",");
this.gethaveinfo(e[e.length - 1])
this.formadd.parentDepartmentId = ''
this.formadd.parentDepartmentName = ''
} else {
this.formadd.parentDepartmentId = ''
this.formadd.hospitalAgencyName = "";
}
} else {
this.getinfo();
}
},
gethaveinfo(id) {
getDepartmentList({ hospitalAgencyId: id }).then((res) => {
this.optionsparentDepartment = res.data;
});
},
/** 查询标准科室对照信息列表 */
infocompare() {
this.loading = true;
listCompare(this.queryParamscompare).then((response) => {
this.compareList = response.rows;
// this.total = response.total;
this.loading = false;
});
},
// 细分类别
getinfolist() {
listSubdivision().then((res) => {
this.optionsubdivisionCategory = res.rows;
});
},
// 上级科室
getinfo() {
getDepartmentList().then((res) => {
this.optionsparentDepartment = res.data;
});
},
// 上级科室
changeparentDepartment(e) {
this.form.parentDepartmentId = e;
},
// 节点类型
info() {
var dictType = "department_node_type";
getAgencytype(dictType).then((res) => {
this.nodeTypeoptions = res.data;
});
},
// 科室类型
infodepartment() {
var dictType = "department_type";
getAgencytype(dictType).then((res) => {
this.departmentoptions = res.data;
});
},
// 服务类别
infolist() {
var dictType = "provide_service_category";
getAgencytype(dictType).then((res) => {
this.options = res.data;
});
},
// 取消按钮
canceladd() {
this.openadd = false;
this.reset();
},
optionsubdivision(e) {
// this.form.subdivisionCategoryId = this.optionsubdivisionCategory.find(
// (e) => e.id == this.form.subdivisionCategoryId
// ).subdivisionCategoryName;
// console.log(this.form.subdivisionCategoryName)
},
// 表单重置
reset() {
this.formadd = {
id: null,
parentDepartmentId: null,
hospitalAgencyId: null,
hospitalAgencyIdtwo: null,
hospitalAgencyName: null,
departmentName: null,
departmentCode: null,
departmentType: null,
departmentAbbreviation: null,
departmentPersonId: null,
departmentPersonName: null,
nodeType: null,
provideServiceCategory: null,
subdivisionCategoryId: null,
subdivisionCategoryName: null,
normDepartmentCompareId: null,
normDepartmentCompareName: null,
prepareBedsCount: null,
departmentPhone: null,
departmentMail: null,
establishDate: null,
revokeDate: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
parentDepartmentName: null,
};
this.resetForm("formadd");
},
/** 提交按钮 --添加*/
submitFormadd() {
let reg = new RegExp("-", "g");
if (this.formadd.establishDate && this.formadd.revokeDate && new Date(this.formadd.establishDate.replace(reg, "/")) >
new Date(this.formadd.revokeDate.replace(reg, "/"))) {
this.$message.error("撤销日期要大于成立日期");
}
else {
this.$refs["formadd"].validate((valid) => {
if (valid) {
if (!this.formadd.hospitalAgencyId) {
this.formadd.hospitalAgencyId = this.formadd.hospitalAgencyIdtwo
}
var obj = {
departmentName: this.formadd.departmentName,
id: ''
}
console.log(this.formadd, 'this.formadd')
console.log(this.form, 'this.form')
addDepartment(this.formadd).then((response) => {
this.$modal.msgSuccess("添加成功");
this.form.departments.push(obj)
console.log(this.form.deptAliasVOS)
// this.form.deptAliasVOS[this.indexadd].departmentName = this.formadd.departmentName
this.$set(this.form.deptAliasVOS[this.indexadd], 'departmentName', this.formadd.departmentName)
this.openadd = false;
// this.getList();
});
}
});
}
},
/** 提交按钮 */
submitForm() {
// this.$forceUpdate()
var emptyItems = []
emptyItems = this.form.deptAliasVOS.filter(f => f.departmentName == "" || f.departmentName == null)
console.log(emptyItems, 'this.emptyItems')
if (emptyItems.length > 0) {
this.$modal.msgError("必填项请填写完整,再进行提交");
} else {
secondaryUpload(this.form).then(response => {
if (response.code == 200) {
this.$modal.msgSuccess(response.msg);
} else {
this.$modal.msgError(response.msg);
}
this.open = false;
this.$emit('handleRules')
}).catch(() => {
this.open = false;
})
}
},
// 屏幕resize监听
screenChange() {
// 屏幕resize监听事件一旦屏幕宽高发生变化就会执行resize
window.addEventListener('resize', this.minShowCtrol, true)
// 将屏幕监听事件移除
// 这步是必须的。离开页面时不移除,再返回,或者进入到别的有相同元素的页面会报错
// 或者将这里的方法直接写在beforeDestroy函数中也可以
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.minShowCtrol, true)
})
},
shiftCollapsiable() {
this.fold = !this.fold
this.$emit('fold', this.fold)
this.minShowCtrol()
},
// 通过maxShow控制元素显示/折叠
minShowCtrol() {
this.maxShow = Math.floor(this.$refs.searchFilter.offsetWidth / this.labelWidths)
const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
const len = group?.length ? group?.length - 1 : 0
if (this.maxShow < len) {
group.forEach((item, index) => {
item.hidden = false
if (index > this.maxShow - 1) {
item.hidden = !this.fold
}
})
this.collapsiable = true
} else {
this.collapsiable = false
}
this.screenChange();
this.$emit('minShowCtrol')
},
handleQuery() {
this.$emit('search')
},
handleReset() {
this.$emit('reset')
},
},
}
</script>
<style lang="scss" scoped>
.item-search-form {
::v-deep .el-form-item {
height: 28px !important;
}
}
::v-deep .el-checkbox__label {
font-size: 12px;
}
::v-deep .el-checkbox__inner {
width: 12px;
height: 12px;
}
.el-cascader .el-input input::-webkit-input-placeholder {
color: black;
}
.nameinformation {
border-left: 3px solid #4d9de7;
width: 200px;
height: 20px;
padding-left: 10px;
font-size: 18px;
// margin-top: 8px;
color: black;
}
.content {
margin: 22px;
}
.el-cascader .el-input input::-webkit-input-placeholder {
color: #686a6d;
}
// 遮罩层
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
// display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* 确保遮罩层在顶部 */
.maskimg {
position: absolute;
// top: 49%;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
.text {
position: absolute;
left: 19%;
width: 123px;
// color: #1989fa;
color: #f28e01;
}
// 加载
.newloding {
margin-top: 10px;
}
.wrap {
position: relative;
height: 40px;
// background: beige;
width: 200px;
}
.progress-bar {
position: absolute;
top: 23px;
width: 100%;
height: 12px;
border-radius: 6px;
background-color: rgb(255, 237, 212);
.inner {
position: absolute;
top: 0;
z-index: 10;
border-radius: 6px;
height: 12px;
width: 100px;
background: #f28e01;
transition: left 1s ease-in-out;
// animation: shrink 5s linear infinite;
animation: changeWidth 1s forwards linear, shrink 1s linear infinite;
background-image: url(~@/assets/images/jd.png);
}
}
.progress {
width: 0%;
height: 100%;
background-color: #00aaff;
transition: width 1s ease-in-out;
}
.runner {
width: 60px;
height: 24px;
background-image: url(~@/assets/images/run.gif);
background-size: contain;
position: absolute;
top: -27px;
transition: left 1s ease-in-out;
animation: run 1s forwards linear;
margin-left: -55px;
}
@keyframes run {
0% {
left: 0;
}
100% {
left: var(--left);
}
}
@keyframes changeWidth {
0% {
width: 0;
}
100% {
width: var(--left);
background-position: 40px 0;
}
}
@keyframes shrink {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
}
}
</style>