|
@@ -23,15 +23,16 @@
|
|
<el-form-item label="联系方式" prop="yyLrRzyddh">
|
|
<el-form-item label="联系方式" prop="yyLrRzyddh">
|
|
<el-input v-model="form.yyLrRzyddh" placeholder="请输入手机号码" clearable></el-input>
|
|
<el-input v-model="form.yyLrRzyddh" placeholder="请输入手机号码" clearable></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="养老机构选择" prop="yyLrYljg">
|
|
|
|
- <el-input class="yljg-ipt" v-model="form.yyLrYljg" placeholder="请选择养老机构" disabled clearable></el-input>
|
|
|
|
- <el-button type="danger" @click="showOrg = true">选 择</el-button>
|
|
|
|
|
|
+ <el-form-item label="养老机构选择" prop="jgmc">
|
|
|
|
+ <el-input class="yljg-ipt" v-model="form.jgmc" placeholder="请选择养老机构" disabled></el-input>
|
|
|
|
+ <el-button type="danger" @click="chooseBtn">选 择</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="老人居住地址所在行政区划" prop="lrjzdzxzqh">
|
|
<el-form-item label="老人居住地址所在行政区划" prop="lrjzdzxzqh">
|
|
- <el-input v-model="form.lrjzdzxzqh" placeholder="请选择老人居住地址所在行政区划" clearable></el-input>
|
|
|
|
|
|
+ <RegionCascaderSelect v-model="form.lrjzdzxzqh" :checkStrictly="false"></RegionCascaderSelect>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="居住地址描述" prop="lrjzdz">
|
|
|
|
- <el-input v-model="form.lrjzdz" placeholder="请输入老人居住地址" clearable></el-input>
|
|
|
|
|
|
+ <el-form-item label="详细地址" prop="lrjzdz">
|
|
|
|
+ <el-input v-model="form.lrjzdz" type="textarea" maxlength="400" show-word-limit placeholder="请输入老人详细居住地址">
|
|
|
|
+ </el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-button v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.3)" class="submitBtn"
|
|
<el-button v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.3)" class="submitBtn"
|
|
@@ -42,8 +43,59 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 选择养老机构弹出框 -->
|
|
<!-- 选择养老机构弹出框 -->
|
|
- <el-dialog title="养老机构选择" width="900px" v-model="showOrg" append-to-body>
|
|
|
|
-
|
|
|
|
|
|
+ <el-dialog custom-class="org-dialog" title="养老机构选择" width="900px" v-model="showOrg" align-center append-to-body
|
|
|
|
+ top="8vh">
|
|
|
|
+ <el-scrollbar>
|
|
|
|
+ <el-row justify="space-between">
|
|
|
|
+ <el-col :span="7">
|
|
|
|
+ <OrgTreeSelEmbed ref="dztree" @handleNodeClick="getOrgList($event)"></OrgTreeSelEmbed>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="16">
|
|
|
|
+ <div class="bottom_box" v-loading="loading" v-if="orgList.length>0">
|
|
|
|
+ <div class="jg_box" v-for="(item,index) in orgList" :key="index">
|
|
|
|
+ <div class="jg_main" @click="chooseOrg(item)" :class="{active: item.id === active }">
|
|
|
|
+ <div class="img">
|
|
|
|
+ <el-image style="width: 100%;height: 100%" :src="item.url" fit="cover">
|
|
|
|
+ <template #error>
|
|
|
|
+ <div class="image-slot">
|
|
|
|
+ <el-icon>
|
|
|
|
+ <icon-picture />
|
|
|
|
+ </el-icon>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-image>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="rigth_nr">
|
|
|
|
+ <div class="height25 font_style1">
|
|
|
|
+ {{item.jgmc}}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="height25 font_style2">
|
|
|
|
+ <el-rate v-model="item.dj" disabled text-color="#ff9900" />
|
|
|
|
+ ({{selectDictLabel(CZ015,item.pddj)}})
|
|
|
|
+ </div>
|
|
|
|
+ <div class="height25 font_style3">
|
|
|
|
+ 地址:{{item.txdz}}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="height25 font_style3">
|
|
|
|
+ 电话:{{item.frlxfs}}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else>
|
|
|
|
+ <el-empty :image-size="200" />
|
|
|
|
+ </div>
|
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
|
+ v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <span class="dialog-footer">
|
|
|
|
+ <el-button type="danger" @click="showOrg = false">确 定</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </template>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -51,50 +103,57 @@
|
|
<script setup>
|
|
<script setup>
|
|
import { onBeforeUnmount, reactive, ref } from 'vue'
|
|
import { onBeforeUnmount, reactive, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useRouter } from 'vue-router'
|
|
-import { orderOrg } from '@/api/home'
|
|
|
|
|
|
+import { orderOrg, jcxxList } from '@/api/home'
|
|
|
|
+import { Regular, chineseOne, idCard } from '@/utils/regular'
|
|
|
|
|
|
-const showForm = ref(true)
|
|
|
|
|
|
+let timer
|
|
|
|
+ , router = useRouter()
|
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
|
+const { CZ015 } = proxy.useDict('CZ015');
|
|
const showOrg = ref(false)
|
|
const showOrg = ref(false)
|
|
|
|
+
|
|
|
|
+/*------------表单相关start--------------*/
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
const formRef = ref()
|
|
const formRef = ref()
|
|
-let router = useRouter()
|
|
|
|
-let timer
|
|
|
|
-
|
|
|
|
-// 表单数据
|
|
|
|
-const form = reactive({
|
|
|
|
- // xm: '夏洛', // 姓名
|
|
|
|
- // zjhm: '220123194808291226', // 证件号码
|
|
|
|
- // lrjzdzxzqh: '220102001001', // 居住地行政区划
|
|
|
|
- // lrjzdz: '前进大街1000号', // 居住地址
|
|
|
|
- // yyLrRzyddh: '15578176756', // 联系方式
|
|
|
|
- // yyLrYljg: '03bc8c3afc1c233a6fd07483193a0014', // 选择机构
|
|
|
|
-})
|
|
|
|
-// 表单校验规则
|
|
|
|
|
|
+const showForm = ref(true)
|
|
|
|
+const form = reactive({})
|
|
const rules = reactive({
|
|
const rules = reactive({
|
|
xm: [
|
|
xm: [
|
|
{ required: true, message: '请输入老人姓名', trigger: 'blur' },
|
|
{ required: true, message: '请输入老人姓名', trigger: 'blur' },
|
|
|
|
+ { validator: chineseOne, trigger: 'blur' }
|
|
],
|
|
],
|
|
zjhm: [
|
|
zjhm: [
|
|
{ required: true, message: '请输入老人身份证号码', trigger: 'blur' },
|
|
{ required: true, message: '请输入老人身份证号码', trigger: 'blur' },
|
|
- { max: 18, message: '身份证号码不能超过18位', trigger: 'blur' },
|
|
|
|
|
|
+ { validator: idCard, trigger: 'blur' }
|
|
],
|
|
],
|
|
lrjzdzxzqh: [
|
|
lrjzdzxzqh: [
|
|
{ required: true, message: '请输入老人居住地址', trigger: 'blur' },
|
|
{ required: true, message: '请输入老人居住地址', trigger: 'blur' },
|
|
],
|
|
],
|
|
yyLrRzyddh: [
|
|
yyLrRzyddh: [
|
|
{ required: true, message: '请输入填报人手机号码', trigger: 'blur' },
|
|
{ required: true, message: '请输入填报人手机号码', trigger: 'blur' },
|
|
|
|
+ { pattern: Regular.Mobile, message: '手机号格式不对', trigger: 'blur' }
|
|
],
|
|
],
|
|
- yyLrYljg: [
|
|
|
|
|
|
+ jgmc: [
|
|
{ required: true, message: '请选择机构', trigger: 'blur' },
|
|
{ required: true, message: '请选择机构', trigger: 'blur' },
|
|
],
|
|
],
|
|
})
|
|
})
|
|
-
|
|
|
|
async function onSubmit(formEl) {
|
|
async function onSubmit(formEl) {
|
|
if (!formEl) return
|
|
if (!formEl) return
|
|
await formEl.validate((valid, fields) => {
|
|
await formEl.validate((valid, fields) => {
|
|
loading.value = true
|
|
loading.value = true
|
|
if (valid) {
|
|
if (valid) {
|
|
- orderOrg(form).then((res) => {
|
|
|
|
|
|
+ let szxzqh = ''
|
|
|
|
+ if (Array.isArray(form.lrjzdzxzqh)) {
|
|
|
|
+ szxzqh = form.lrjzdzxzqh[form.lrjzdzxzqh.length - 1]
|
|
|
|
+ } else {
|
|
|
|
+ let data = JSON.parse(form.lrjzdzxzqh)
|
|
|
|
+ szxzqh = data[data.length - 1]
|
|
|
|
+ }
|
|
|
|
+ let postData = {
|
|
|
|
+ ...form,
|
|
|
|
+ lrjzdzxzqh: szxzqh
|
|
|
|
+ }
|
|
|
|
+ orderOrg(postData).then((res) => {
|
|
console.log(res);
|
|
console.log(res);
|
|
showForm.value = false
|
|
showForm.value = false
|
|
timer = setTimeout(() => router.push('/rzyljgsq'), 2000)
|
|
timer = setTimeout(() => router.push('/rzyljgsq'), 2000)
|
|
@@ -102,10 +161,53 @@ async function onSubmit(formEl) {
|
|
loading.value = false
|
|
loading.value = false
|
|
})
|
|
})
|
|
} else {
|
|
} else {
|
|
|
|
+ console.log(fields);
|
|
loading.value = false
|
|
loading.value = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+/*------------表单相关end-------------*/
|
|
|
|
+
|
|
|
|
+/*------------养老机构选择start--------------*/
|
|
|
|
+const active = ref('')
|
|
|
|
+const orgList = ref([])
|
|
|
|
+const total = ref(0)
|
|
|
|
+const queryParams = reactive({
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 5,
|
|
|
|
+ isChxddjg: '',
|
|
|
|
+ pddj: '',
|
|
|
|
+ cwzs: '',
|
|
|
|
+ jgmc: '',
|
|
|
|
+ status: '',
|
|
|
|
+ szxzqh: '',
|
|
|
|
+})
|
|
|
|
+function chooseOrg(rows) {
|
|
|
|
+ active.value = rows.id
|
|
|
|
+ form.jgmc = rows.jgmc
|
|
|
|
+ form.yyLrYljg = rows.id
|
|
|
|
+}
|
|
|
|
+function chooseBtn(e) {
|
|
|
|
+ showOrg.value = true
|
|
|
|
+ orgList.value.length > 0 ? false : getOrgList(e)
|
|
|
|
+}
|
|
|
|
+function getOrgList(e) {
|
|
|
|
+ queryParams.szxzqh = e.code
|
|
|
|
+ getList()
|
|
|
|
+}
|
|
|
|
+function getList() {
|
|
|
|
+ loading.value = true;
|
|
|
|
+ jcxxList(queryParams).then(response => {
|
|
|
|
+ orgList.value = response.rows.map(item => {
|
|
|
|
+ return { ...item, dj: parseInt(item.pddj), url: item.jgUrl ? item.jgUrl.split(',')[0] : '' }
|
|
|
|
+ });
|
|
|
|
+ console.log('orgList', orgList.value);
|
|
|
|
+ total.value = response.total;
|
|
|
|
+ loading.value = false;
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/*------------养老机构选择end--------------*/
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
onBeforeUnmount(() => {
|
|
clearTimeout(timer)
|
|
clearTimeout(timer)
|
|
@@ -189,4 +291,74 @@ onBeforeUnmount(() => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.bottom_box {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .jg_box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100px;
|
|
|
|
+ background: #FAFAFC;
|
|
|
|
+ display: flex;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ padding: 1px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .jg_main {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 3px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+
|
|
|
|
+ &.active {
|
|
|
|
+ box-shadow: 0 0 0 1px #bfd4f5;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .img {
|
|
|
|
+ width: 25%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background: #bfd4f5;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .rigth_nr {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 70%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .height25 {
|
|
|
|
+ height: 25%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .font_style1 {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #444B55;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .font_style2 {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #444B55;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .font_style3 {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #999999;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pagination-container {
|
|
|
|
+ padding: 0;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|