fix: 分辨率自适应，测试问题修改
parent
8f940705f0
commit
8c0663abf8
@ -0,0 +1,13 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="tishi" clip-path="url(#clip0_2113_4143)">
|
||||
<path id="Vector" d="M7 0C3.1 0 0 3.1 0 7C0 10.9 3.1 14 7 14C10.9 14 14 10.9 14 7C14 3.1 10.9 0 7 0Z" fill="#00975E"/>
|
||||
<g id="对号 2">
|
||||
<path id="Vector_2" d="M4.14564 6.15296C3.8463 5.85206 3.36038 5.85226 3.06059 6.15282L3.06046 6.15296C2.76162 6.45335 2.76162 6.9404 3.06046 7.24079L3.06052 7.24085L5.52864 9.71898L5.52886 9.71919L9.95367 4.40062L9.84739 4.29477L9.84736 4.29481C9.8473 4.29486 9.84725 4.29492 9.8472 4.29497L6.07117 8.08619L4.14564 6.15296ZM4.14564 6.15296L4.03942 6.25863L4.14557 6.1529L4.14564 6.15296Z" fill="white" stroke="white" stroke-width="0.3"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2113_4143">
|
||||
<rect width="14" height="14" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 871 B |
@ -0,0 +1,10 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="tishi" clip-path="url(#clip0_2113_4249)">
|
||||
<path id="Vector" d="M7 0C3.1 0 0 3.1 0 7C0 10.9 3.1 14 7 14C10.9 14 14 10.9 14 7C14 3.1 10.9 0 7 0ZM7.8 11.2C7.8 11.7 7.5 12 7 12C6.5 12 6.2 11.7 6.2 11.2V6.6C6.2 6.1 6.5 5.8 7 5.8C7.5 5.8 7.8 6.1 7.8 6.6V11.2ZM8.2 3.6C8.2 4.3 7.6 4.8 7 4.8C6.4 4.8 5.8 4.3 5.8 3.6C5.8 2.9 6.3 2.3 7 2.3C7.7 2.3 8.2 2.9 8.2 3.6Z" fill="#FF3429"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2113_4249">
|
||||
<rect width="14" height="14" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 591 B |
@ -0,0 +1,208 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import ProblemBase from "@/views/caseManagement/diseaseType/compontents/problemBase.vue";
|
||||
import AddQuestion from "./AddQuestion.vue";
|
||||
import { message } from "@/utils/message";
|
||||
const seachForm = reactive({
|
||||
type: "",
|
||||
name: "",
|
||||
patientSelfDesc: "",
|
||||
patientAge: "",
|
||||
diseaseId: ""
|
||||
});
|
||||
const typeList = ref([]);
|
||||
const problemBaseRef = ref();
|
||||
const AddQuestionRef = ref();
|
||||
const dataList = ref([{}]);
|
||||
|
||||
const pagination = reactive<any>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "序号",
|
||||
type: "index",
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
label: "问题",
|
||||
prop: "itemName"
|
||||
},
|
||||
{
|
||||
label: "回复",
|
||||
prop: "itemName"
|
||||
},
|
||||
{
|
||||
label: "问题类目",
|
||||
prop: "itemName"
|
||||
},
|
||||
{
|
||||
label: "诊断依据",
|
||||
prop: "itemName"
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 200,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const getData = () => {};
|
||||
const search = () => {
|
||||
pagination.currentPage = 1;
|
||||
pagination.pageSize = 10;
|
||||
getData();
|
||||
};
|
||||
const selectQuestion = () => {
|
||||
problemBaseRef.value.open();
|
||||
};
|
||||
const add = () => {
|
||||
AddQuestionRef.value.open();
|
||||
};
|
||||
const edit = item => {};
|
||||
const handleDelete = item => {};
|
||||
const reset = () => {
|
||||
seachForm.name = "";
|
||||
seachForm.type = "";
|
||||
search();
|
||||
};
|
||||
const selectOk = async (data: any) => {
|
||||
let flag = true;
|
||||
data.forEach(e => {
|
||||
for (const item of dataList.value) {
|
||||
if (item.libraryQuestionId === e.libraryQuestionId) {
|
||||
message("不能选择重复数据", { type: "error" });
|
||||
flag = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
dataList.value.push({
|
||||
defaultAnswer: e.defaultAnswer,
|
||||
dictNamePath: e.nameZhPath,
|
||||
medicalRecAnswer: e.defaultAnswer,
|
||||
libraryQuestionId: e.libraryQuestionId,
|
||||
questionList: e.question,
|
||||
answerResourceId: e.answerResourceId
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="ClinicalConsultation">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<span>临床问诊</span>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<el-button
|
||||
size="large"
|
||||
class="btn"
|
||||
@click="selectQuestion"
|
||||
type="primary"
|
||||
>选择问题</el-button
|
||||
>
|
||||
<el-button size="large" class="btn" @click="add" type="primary"
|
||||
>添加问题</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
style="padding-right: 40px"
|
||||
ref="ruleFormRef"
|
||||
:model="seachForm"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-row>
|
||||
<el-form-item label="类目" prop="patientGender">
|
||||
<el-select
|
||||
size="large"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
v-model="seachForm.type"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题">
|
||||
<el-input size="large" v-model="seachForm.name" />
|
||||
</el-form-item>
|
||||
<el-button class="ml-8" size="large" @click="search" type="primary"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button size="large" @click="reset">重置</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div style="padding: 0 40px">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
v-if="dataList.length > 0"
|
||||
align-whole="center"
|
||||
style="height: calc(100vh - 485px)"
|
||||
showOverflowTooltip
|
||||
class="mt-4"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #basisConfirm="{ row }">
|
||||
<el-checkbox
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
v-model="row.basisConfirmFlag"
|
||||
size="large"
|
||||
/>
|
||||
</template>
|
||||
<template #operation="{ row }">
|
||||
<el-button link type="primary" @click="edit(row)"> 编辑 </el-button>
|
||||
<el-button link type="danger" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</pure-table>
|
||||
</div>
|
||||
<ProblemBase @select="selectOk" ref="problemBaseRef" />
|
||||
<AddQuestion ref="AddQuestionRef" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.ClinicalConsultation {
|
||||
flex: 1;
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88px;
|
||||
padding: 0 40px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
|
||||
.header_left {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
border-left: 6px solid #4287ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,178 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
const seachForm = reactive({
|
||||
type: "",
|
||||
name: "",
|
||||
patientSelfDesc: "",
|
||||
patientAge: "",
|
||||
diseaseId: ""
|
||||
});
|
||||
const typeList = ref([]);
|
||||
const dataList = ref([{}]);
|
||||
const pagination = reactive<any>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "检查项目",
|
||||
prop: "toolName"
|
||||
},
|
||||
{
|
||||
label: "检查部位",
|
||||
prop: "locationName"
|
||||
},
|
||||
{
|
||||
label: "初步诊断依据",
|
||||
slot: "slot0"
|
||||
},
|
||||
{
|
||||
label: "证实诊断依据",
|
||||
slot: "slot1"
|
||||
},
|
||||
{
|
||||
label: "鉴别依据",
|
||||
slot: "slot2"
|
||||
},
|
||||
{
|
||||
label: "全面依据",
|
||||
slot: "slot3"
|
||||
},
|
||||
{
|
||||
label: "是否必查",
|
||||
prop: "requireCheckFlag",
|
||||
slot: "requireCheckFlag"
|
||||
}
|
||||
];
|
||||
const getData = () => {};
|
||||
const search = () => {
|
||||
pagination.currentPage = 1;
|
||||
pagination.pageSize = 10;
|
||||
getData();
|
||||
};
|
||||
|
||||
const add = () => {};
|
||||
const edit = item => {};
|
||||
const handleDelete = item => {};
|
||||
const reset = () => {
|
||||
seachForm.name = "";
|
||||
seachForm.type = "";
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="ClinicalDiagnosis">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<span>临床诊断-体格检查辅助检查项目</span>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<el-button size="large" class="btn" @click="add" type="primary"
|
||||
>保存</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
style="padding-right: 40px"
|
||||
ref="ruleFormRef"
|
||||
:model="seachForm"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-row>
|
||||
<el-form-item label="类目" prop="patientGender">
|
||||
<el-select
|
||||
size="large"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
v-model="seachForm.type"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题">
|
||||
<el-input size="large" v-model="seachForm.name" />
|
||||
</el-form-item>
|
||||
<el-button class="ml-8" size="large" @click="search" type="primary"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button size="large" @click="reset">重置</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div style="padding: 0 40px">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
v-if="dataList.length > 0"
|
||||
align-whole="center"
|
||||
style="height: calc(100vh - 485px)"
|
||||
showOverflowTooltip
|
||||
class="mt-4"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #basisConfirm="{ row }">
|
||||
<el-checkbox
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
v-model="row.basisConfirmFlag"
|
||||
size="large"
|
||||
/>
|
||||
</template>
|
||||
<template #basisIdentification="{ row }">
|
||||
<el-checkbox
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
v-model="row.basisIdentificationFlag"
|
||||
size="large"
|
||||
/>
|
||||
</template>
|
||||
<template #operation="{ row }">
|
||||
<el-button link type="primary" @click="edit(row)"> 编辑 </el-button>
|
||||
<el-button link type="danger" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</pure-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.ClinicalDiagnosis {
|
||||
flex: 1;
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88px;
|
||||
padding: 0 40px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
|
||||
.header_left {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
border-left: 6px solid #4287ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
const seachForm = reactive({
|
||||
primarilyDiagnosisCriteria: "",
|
||||
confirmDiagnosisCriteria: "",
|
||||
patientSelfDesc: "",
|
||||
differentialDiagnosisCriteria: "",
|
||||
fullCheck: ""
|
||||
});
|
||||
const add = () => {};
|
||||
|
||||
const reset = () => {};
|
||||
</script>
|
||||
<template>
|
||||
<div class="DiagnosticBasis">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<span>诊断依据</span>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<el-button size="large" class="btn" @click="add" type="primary"
|
||||
>保存</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form class="mt-4 mr-10" :model="seachForm" label-width="180px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="初步诊断依据："
|
||||
prop="primarilyDiagnosisCriteria"
|
||||
>
|
||||
<el-input
|
||||
:rows="4"
|
||||
style="width: 100%"
|
||||
type="textarea"
|
||||
:maxLength="500"
|
||||
placeholder="请输入描述"
|
||||
v-model="seachForm.primarilyDiagnosisCriteria"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="证实诊断依据：" prop="confirmDiagnosisCriteria">
|
||||
<el-input
|
||||
:rows="4"
|
||||
style="width: 100%"
|
||||
type="textarea"
|
||||
:maxLength="500"
|
||||
placeholder="请输入描述"
|
||||
v-model="seachForm.confirmDiagnosisCriteria"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="鉴别依据：" prop="differentialDiagnosisCriteria">
|
||||
<el-input
|
||||
:rows="4"
|
||||
style="width: 100%"
|
||||
type="textarea"
|
||||
:maxLength="500"
|
||||
placeholder="请输入描述"
|
||||
v-model="seachForm.differentialDiagnosisCriteria"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="处置诊断说明" prop="fullCheck">
|
||||
<el-input
|
||||
:rows="4"
|
||||
style="width: 100%"
|
||||
type="textarea"
|
||||
:maxLength="500"
|
||||
placeholder="请输入描述"
|
||||
v-model="seachForm.fullCheck"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.DiagnosticBasis {
|
||||
flex: 1;
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88px;
|
||||
padding: 0 40px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
|
||||
.header_left {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
border-left: 6px solid #4287ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
const seachForm = reactive({
|
||||
type: "",
|
||||
name: "",
|
||||
patientSelfDesc: "",
|
||||
patientAge: "",
|
||||
diseaseId: ""
|
||||
});
|
||||
const typeList = ref([]);
|
||||
const dataList = ref([{}]);
|
||||
const pagination = reactive<any>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
label: "检查项目",
|
||||
prop: "toolName"
|
||||
},
|
||||
{
|
||||
label: "检查部位",
|
||||
prop: "locationName"
|
||||
},
|
||||
{
|
||||
label: "初步诊断依据",
|
||||
slot: "slot0"
|
||||
},
|
||||
{
|
||||
label: "证实诊断依据",
|
||||
slot: "slot1"
|
||||
},
|
||||
{
|
||||
label: "鉴别依据",
|
||||
slot: "slot2"
|
||||
},
|
||||
{
|
||||
label: "全面依据",
|
||||
slot: "slot3"
|
||||
},
|
||||
{
|
||||
label: "是否必查",
|
||||
prop: "requireCheckFlag",
|
||||
slot: "requireCheckFlag"
|
||||
}
|
||||
];
|
||||
const getData = () => {};
|
||||
const search = () => {
|
||||
pagination.currentPage = 1;
|
||||
pagination.pageSize = 10;
|
||||
getData();
|
||||
};
|
||||
|
||||
const add = () => {};
|
||||
const handleDelete = item => {};
|
||||
const reset = () => {
|
||||
seachForm.name = "";
|
||||
seachForm.type = "";
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="DisposalPlan">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<span>处置计划</span>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<el-button size="large" class="btn" @click="add" type="primary"
|
||||
>保存</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
style="padding-right: 40px"
|
||||
ref="ruleFormRef"
|
||||
:model="seachForm"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-row>
|
||||
<el-form-item label="类目" prop="patientGender">
|
||||
<el-select
|
||||
size="large"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
v-model="seachForm.type"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题">
|
||||
<el-input size="large" v-model="seachForm.name" />
|
||||
</el-form-item>
|
||||
<el-button class="ml-8" size="large" @click="search" type="primary"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button size="large" @click="reset">重置</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div style="padding: 0 40px">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
v-if="dataList.length > 0"
|
||||
align-whole="center"
|
||||
style="height: calc(100vh - 485px)"
|
||||
showOverflowTooltip
|
||||
class="mt-4"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #basisConfirm="{ row }">
|
||||
<el-checkbox
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
v-model="row.basisConfirmFlag"
|
||||
size="large"
|
||||
/>
|
||||
</template>
|
||||
<template #basisIdentification="{ row }">
|
||||
<el-checkbox
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
v-model="row.basisIdentificationFlag"
|
||||
size="large"
|
||||
/>
|
||||
</template>
|
||||
<template #operation="{ row }">
|
||||
<el-button link type="danger" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</pure-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.DisposalPlan {
|
||||
flex: 1;
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88px;
|
||||
padding: 0 40px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
|
||||
.header_left {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
border-left: 6px solid #4287ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,215 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, ref } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "AddCase"
|
||||
});
|
||||
const isEditFlag = ref(false);
|
||||
const dataList = ref([
|
||||
{
|
||||
url: "",
|
||||
key: 1,
|
||||
name: "虚拟人名称"
|
||||
},
|
||||
{
|
||||
url: "",
|
||||
key: 2,
|
||||
name: "虚拟人名称"
|
||||
},
|
||||
{
|
||||
url: "",
|
||||
key: 3,
|
||||
name: "虚拟人名称"
|
||||
}
|
||||
]);
|
||||
const selectKey = ref(1);
|
||||
const id = ref("");
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
defineExpose({
|
||||
async open(item) {
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogVisible.value = false;
|
||||
isEditFlag.value = false;
|
||||
};
|
||||
const emit = defineEmits(["update"]);
|
||||
const reset = () => {};
|
||||
|
||||
const save = () => {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
:size="650"
|
||||
append-to-body
|
||||
v-model="dialogVisible"
|
||||
:show-close="false"
|
||||
:with-header="false"
|
||||
:before-close="closeDialog"
|
||||
custom-class="SelectPeople"
|
||||
>
|
||||
<div class="SelectPeople">
|
||||
<div class="header-title">
|
||||
<div class="tip" />
|
||||
<span>选择虚拟人形象</span>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div class="img_list">
|
||||
<div
|
||||
class="img_list_item"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.url" alt="" />
|
||||
<div class="img_list_desc">{{ item.name }}</div>
|
||||
<div class="no_select" v-if="selectKey !== item.key" />
|
||||
<div class="selected" v-if="selectKey === item.key">
|
||||
<span class="in_select" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="footer_btn">
|
||||
<div class="reset" @click="reset()">重置</div>
|
||||
<div class="main" @click="save()">确定</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.SelectPeople {
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// border-left: 6px solid #4287ff;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #2b3f54;
|
||||
|
||||
.tip {
|
||||
width: 6px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
line-height: 20px;
|
||||
background: #4287ff;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
position: relative;
|
||||
left: -20px;
|
||||
width: 650px;
|
||||
height: 1px;
|
||||
margin: 24px 0;
|
||||
background: rgb(91 139 255 / 30%);
|
||||
}
|
||||
.img_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.img_list_item {
|
||||
width: 190px;
|
||||
position: relative;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
|
||||
// margin-right: 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
}
|
||||
.img_list_item:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.img_list_desc {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
border-radius: 0px 0px 12px 12px;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 40px;
|
||||
padding-left: 16px;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
.no_select {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #ffffff;
|
||||
border-radius: 28px 28px 28px 28px;
|
||||
border: 1px solid #d9d9d9;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.selected {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #ffffff;
|
||||
border-radius: 28px 28px 28px 28px;
|
||||
border: 1px solid #4287ff;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.in_select {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #4287ff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer_btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
|
||||
.reset {
|
||||
width: 188px;
|
||||
height: 48px;
|
||||
margin-right: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 48px;
|
||||
color: #4287ff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #4287ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 188px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: #4287ff;
|
||||
border: 1px solid #4287ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue