|
|
@@ -2,10 +2,22 @@
|
|
|
<div v-if="pageStatus === '0'" class="empty-box">
|
|
|
<div class="empty-bg" />
|
|
|
<div class="empty-text1">应急（三防）责任人信息填写</div>
|
|
|
- <div class="empty-text2">为确保您能第一时间收到三防预警信息，请您花2-3<br/>分钟配合完成相关资料的填写，谢谢</div>
|
|
|
- <van-button class="btn primary-btn2" :loading="submitting" type="primary" @click="pageStatus = '2'">开始填写</van-button>
|
|
|
+ <div class="empty-text2">
|
|
|
+ 为确保您能第一时间收到三防预警信息，请您花2-3<br />分钟配合完成相关资料的填写，谢谢
|
|
|
+ </div>
|
|
|
+ <van-button
|
|
|
+ class="btn primary-btn2"
|
|
|
+ :loading="submitting"
|
|
|
+ type="primary"
|
|
|
+ @click="pageStatus = '2'"
|
|
|
+ >开始填写</van-button
|
|
|
+ >
|
|
|
</div>
|
|
|
- <person-information2 v-else-if="pageStatus === '1'" :form="form" @confirm="handleEdit" />
|
|
|
+ <person-information2
|
|
|
+ v-else-if="pageStatus === '1'"
|
|
|
+ :form="form"
|
|
|
+ @confirm="handleEdit"
|
|
|
+ />
|
|
|
<div v-else class="common-form-container">
|
|
|
<van-form @submit="onSubmit">
|
|
|
<div class="form-item">
|
|
|
@@ -17,10 +29,10 @@
|
|
|
<div>姓名:</div>
|
|
|
</div>
|
|
|
<van-field
|
|
|
- v-model="form.name"
|
|
|
- class="common-field"
|
|
|
- placeholder="请输入姓名"
|
|
|
- :rules="rules.name"
|
|
|
+ v-model="form.name"
|
|
|
+ class="common-field"
|
|
|
+ placeholder="请输入姓名"
|
|
|
+ :rules="rules.name"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
@@ -29,10 +41,10 @@
|
|
|
<div>手机号码:</div>
|
|
|
</div>
|
|
|
<van-field
|
|
|
- v-model="form.phone"
|
|
|
- class="common-field"
|
|
|
- placeholder="请输入手机号码"
|
|
|
- :rules="rules.phone"
|
|
|
+ v-model="form.phone"
|
|
|
+ class="common-field"
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ :rules="rules.phone"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
@@ -41,15 +53,19 @@
|
|
|
<div>行政区划:</div>
|
|
|
</div>
|
|
|
<van-field
|
|
|
- v-model="form.area_name"
|
|
|
- class="common-field"
|
|
|
- placeholder="请选择行政区划"
|
|
|
- :rules="rules.area_code"
|
|
|
- :right-icon="selectIcon"
|
|
|
- readonly
|
|
|
- @click="showPicker = true"
|
|
|
+ v-model="form.area_name"
|
|
|
+ class="common-field"
|
|
|
+ placeholder="请选择行政区划"
|
|
|
+ :rules="rules.area_code"
|
|
|
+ :right-icon="selectIcon"
|
|
|
+ readonly
|
|
|
+ @click="showPicker = true"
|
|
|
+ />
|
|
|
+ <RegionSelect
|
|
|
+ v-model="showPicker"
|
|
|
+ :data="form.area_list"
|
|
|
+ @confirm="handleSelect"
|
|
|
/>
|
|
|
- <RegionSelect v-model="showPicker" :data="form.area_list" @confirm="handleSelect" />
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="label-box">
|
|
|
@@ -57,10 +73,10 @@
|
|
|
<div>所属单位:</div>
|
|
|
</div>
|
|
|
<van-field
|
|
|
- v-model="form.unit_name"
|
|
|
- class="common-field"
|
|
|
- placeholder="请输入所属单位"
|
|
|
- :rules="rules.unit_name"
|
|
|
+ v-model="form.unit_name"
|
|
|
+ class="common-field"
|
|
|
+ placeholder="请输入所属单位"
|
|
|
+ :rules="rules.unit_name"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
@@ -69,10 +85,10 @@
|
|
|
<div>职务:</div>
|
|
|
</div>
|
|
|
<van-field
|
|
|
- v-model="form.position"
|
|
|
- class="common-field"
|
|
|
- placeholder="请输入职务"
|
|
|
- :rules="rules.position"
|
|
|
+ v-model="form.position"
|
|
|
+ class="common-field"
|
|
|
+ placeholder="请输入职务"
|
|
|
+ :rules="rules.position"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
@@ -81,10 +97,10 @@
|
|
|
<div>办公电话:</div>
|
|
|
</div>
|
|
|
<van-field
|
|
|
- v-model="form.telephone"
|
|
|
- class="common-field"
|
|
|
- placeholder="请输入办公电话"
|
|
|
- :rules="rules.telephone"
|
|
|
+ v-model="form.telephone"
|
|
|
+ class="common-field"
|
|
|
+ placeholder="请输入办公电话"
|
|
|
+ :rules="rules.telephone"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
@@ -93,32 +109,52 @@
|
|
|
<div>责任类别:</div>
|
|
|
</div>
|
|
|
<van-field
|
|
|
- v-show="!responsibilityTypeText"
|
|
|
- v-model="responsibilityTypeText"
|
|
|
- class="common-field"
|
|
|
- :right-icon="selectIcon"
|
|
|
- readonly
|
|
|
- placeholder="请选择责任类别"
|
|
|
- :rules="rules.type_list"
|
|
|
- @click="showPicker2 = true"
|
|
|
+ v-show="!responsibilityTypeText"
|
|
|
+ v-model="responsibilityTypeText"
|
|
|
+ class="common-field"
|
|
|
+ :right-icon="selectIcon"
|
|
|
+ readonly
|
|
|
+ placeholder="请选择责任类别"
|
|
|
+ :rules="rules.type_list"
|
|
|
+ @click="showPicker2 = true"
|
|
|
/>
|
|
|
- <div v-show="responsibilityTypeText" class="common-input" @click="showPicker2 = true">
|
|
|
- <div v-for="(item, index) in form.type_list" :key="index" class="text-box">
|
|
|
+ <div
|
|
|
+ v-show="responsibilityTypeText"
|
|
|
+ class="common-input"
|
|
|
+ @click="showPicker2 = true"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in form.type_list"
|
|
|
+ :key="index"
|
|
|
+ class="text-box"
|
|
|
+ >
|
|
|
<div class="text1">{{ item.type_parent }}</div>
|
|
|
<div class="text2">{{ getTypeLabel(item) }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <responsibility-type v-model="showPicker2" :data="form.type_list" @confirm="onConfirm2" />
|
|
|
+ <responsibility-type
|
|
|
+ v-model="showPicker2"
|
|
|
+ :data="form.type_list"
|
|
|
+ @confirm="onConfirm2"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="pageStatus === '1'" class="common-form-footer">
|
|
|
- <van-button class="btn primary-btn" type="primary" @click="handleEdit">编辑</van-button>
|
|
|
+ <van-button class="btn primary-btn" type="primary" @click="handleEdit"
|
|
|
+ >编辑</van-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<div v-if="pageStatus === '2'" class="common-form-footer">
|
|
|
<van-button class="btn" @click="onCancel">取消</van-button>
|
|
|
- <van-button class="btn primary-btn" :loading="submitting" type="primary" native-type="submit">提交</van-button>
|
|
|
+ <van-button
|
|
|
+ class="btn primary-btn"
|
|
|
+ :loading="submitting"
|
|
|
+ type="primary"
|
|
|
+ native-type="submit"
|
|
|
+ >提交</van-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</van-form>
|
|
|
</div>
|
|
|
@@ -126,86 +162,96 @@
|
|
|
|
|
|
<script lang="ts" setup name="EditPersonInformation">
|
|
|
import selectIcon from "@/assets/images/selectIcon.png";
|
|
|
-import {showSuccessToast} from "vant";
|
|
|
+import { showSuccessToast } from "vant";
|
|
|
import ResponsibilityType from "./responsibilityType.vue";
|
|
|
import PersonInformation2 from "./personInformation2.vue";
|
|
|
-import {createPersonal, getPersonalSelfInfo, updatePersonal} from "@/api/persons";
|
|
|
-import {deepClone} from "@/utils";
|
|
|
+import {
|
|
|
+ createPersonal,
|
|
|
+ getPersonalSelfInfo,
|
|
|
+ updatePersonal
|
|
|
+} from "@/api/persons";
|
|
|
+import { deepClone } from "@/utils";
|
|
|
|
|
|
// 页面状态 0缺省页 1详情 2新建、编辑
|
|
|
-let pageStatus = ref('1');
|
|
|
+let pageStatus = ref("1");
|
|
|
// 表单数据
|
|
|
const form = ref({
|
|
|
- name: '',
|
|
|
- phone: '',
|
|
|
- area_code: '',
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ area_code: "",
|
|
|
area_list: [],
|
|
|
- area_name: '',
|
|
|
- unit_name: '',
|
|
|
- position: '',
|
|
|
- telephone: '',
|
|
|
+ area_name: "",
|
|
|
+ unit_name: "",
|
|
|
+ position: "",
|
|
|
+ telephone: "",
|
|
|
type_list: []
|
|
|
});
|
|
|
// 表单校验规则
|
|
|
const rules = reactive({
|
|
|
- name: [{ required: true, message: '姓名不能为空' }],
|
|
|
- phone: [{ required: true, message: '手机号码不能为空' }],
|
|
|
- area_code: [{ required: true, message: '请选择行政区划' }],
|
|
|
- unit_name: [{ required: true, message: '所属单位不能为空' }],
|
|
|
- position: [{ required: true, message: '职务不能为空' }],
|
|
|
- telephone: [{ required: true, message: '办公电话不能为空' }],
|
|
|
- type_list: [{ required: true, message: '请选择责任类别' }]
|
|
|
+ name: [{ required: true, message: "姓名不能为空" }],
|
|
|
+ phone: [{ required: true, message: "手机号码不能为空" }],
|
|
|
+ area_code: [{ required: true, message: "请选择行政区划" }],
|
|
|
+ unit_name: [{ required: true, message: "所属单位不能为空" }],
|
|
|
+ position: [{ required: true, message: "职务不能为空" }],
|
|
|
+ telephone: [{ required: true, message: "办公电话不能为空" }],
|
|
|
+ type_list: [{ required: true, message: "请选择责任类别" }]
|
|
|
+});
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ isShowStructure: Boolean
|
|
|
});
|
|
|
+const emits = defineEmits(["confirm"]);
|
|
|
|
|
|
let showPicker = ref(false);
|
|
|
-const handleSelect = (data) => {
|
|
|
- form.value.area_name = data.length > 0 ? data[data.length - 1].label : '';
|
|
|
- form.value.area_code = data && data.length > 0 ? data[data.length - 1].id : '';
|
|
|
-}
|
|
|
+const handleSelect = data => {
|
|
|
+ form.value.area_name = data.length > 0 ? data[data.length - 1].label : "";
|
|
|
+ form.value.area_code =
|
|
|
+ data && data.length > 0 ? data[data.length - 1].id : "";
|
|
|
+};
|
|
|
let showPicker2 = ref(false);
|
|
|
-let responsibilityTypeText = ref('');
|
|
|
+let responsibilityTypeText = ref("");
|
|
|
// 选择责任类型
|
|
|
-const onConfirm2 = (data) => {
|
|
|
+const onConfirm2 = data => {
|
|
|
showPicker2.value = false;
|
|
|
if (data && data.length > 0) {
|
|
|
form.value.type_list = data;
|
|
|
- responsibilityTypeText.value = '1';
|
|
|
+ responsibilityTypeText.value = "1";
|
|
|
} else {
|
|
|
form.value.type_list = [data];
|
|
|
- responsibilityTypeText.value = '';
|
|
|
+ responsibilityTypeText.value = "";
|
|
|
}
|
|
|
};
|
|
|
-const getTypeLabel = (item) => {
|
|
|
- let str = !!item.labelData ? item.labelData.toString() : '';
|
|
|
+const getTypeLabel = item => {
|
|
|
+ let str = !!item.labelData ? item.labelData.toString() : "";
|
|
|
if (!!item.dept_name) {
|
|
|
- str += `(${item.dept_name})`
|
|
|
+ str += `(${item.dept_name})`;
|
|
|
}
|
|
|
if (!!item.denger_point_name) {
|
|
|
- str += `(${item.denger_point_name})`
|
|
|
+ str += `(${item.denger_point_name})`;
|
|
|
}
|
|
|
if (!!item.other_type_2_name) {
|
|
|
- str += `(${item.other_type_2_name})`
|
|
|
+ str += `(${item.other_type_2_name})`;
|
|
|
}
|
|
|
if (!!item.other_type_label && item.other_type_label.length > 0) {
|
|
|
- str += '('
|
|
|
+ str += "(";
|
|
|
item.other_type_label.forEach((item2, index2) => {
|
|
|
if (index2 > 0) {
|
|
|
- str += '、';
|
|
|
+ str += "、";
|
|
|
}
|
|
|
str += item2;
|
|
|
- })
|
|
|
- str += ')'
|
|
|
- };
|
|
|
+ });
|
|
|
+ str += ")";
|
|
|
+ }
|
|
|
return str;
|
|
|
};
|
|
|
const handleEdit = () => {
|
|
|
- pageStatus.value = '2'
|
|
|
-}
|
|
|
+ pageStatus.value = "2";
|
|
|
+};
|
|
|
// 是否在提交
|
|
|
let submitting = ref(false);
|
|
|
// 返回
|
|
|
const onCancel = () => {
|
|
|
- pageStatus.value = '1'
|
|
|
+ pageStatus.value = "1";
|
|
|
};
|
|
|
|
|
|
// 提交表单
|
|
|
@@ -213,31 +259,34 @@ const onSubmit = () => {
|
|
|
if (submitting.value) return;
|
|
|
submitting.value = true;
|
|
|
const method = !form.value.id ? createPersonal : updatePersonal;
|
|
|
- method(form.value).then(() => {
|
|
|
- showSuccessToast('提交成功');
|
|
|
- getInfo();
|
|
|
- }).finally(() => {
|
|
|
- submitting.value = false;
|
|
|
- })
|
|
|
-}
|
|
|
+ method(form.value)
|
|
|
+ .then(() => {
|
|
|
+ showSuccessToast("提交成功");
|
|
|
+ getInfo();
|
|
|
+ emits("confirm");
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ submitting.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
const getInfo = () => {
|
|
|
- getPersonalSelfInfo().then((res) => {
|
|
|
+ getPersonalSelfInfo().then(res => {
|
|
|
if (!!res.data && !!res.data.id) {
|
|
|
if (res.data.type_list && res.data.type_list.length > 0) {
|
|
|
- responsibilityTypeText.value = '1'
|
|
|
+ responsibilityTypeText.value = "1";
|
|
|
}
|
|
|
form.value = res.data;
|
|
|
- pageStatus.value = '1';
|
|
|
+ pageStatus.value = "1";
|
|
|
} else {
|
|
|
- responsibilityTypeText.value = ''
|
|
|
- pageStatus.value = '0';
|
|
|
+ responsibilityTypeText.value = "";
|
|
|
+ pageStatus.value = "0";
|
|
|
}
|
|
|
- })
|
|
|
-}
|
|
|
+ });
|
|
|
+};
|
|
|
onMounted(() => {
|
|
|
- getInfo()
|
|
|
-})
|
|
|
+ getInfo();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -259,25 +308,32 @@ onMounted(() => {
|
|
|
margin-right: 9px;
|
|
|
flex-shrink: 0;
|
|
|
.icon-name {
|
|
|
- background: url('@/assets/images/threePreventionResponsiblePerson/name.png') no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/name.png")
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
.icon-phone {
|
|
|
- background: url('@/assets/images/threePreventionResponsiblePerson/tel.png') no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/tel.png")
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
.icon-area {
|
|
|
- background: url('@/assets/images/threePreventionResponsiblePerson/area.png') no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/area.png")
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
.icon-dept {
|
|
|
- background: url('@/assets/images/threePreventionResponsiblePerson/dept.png') no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/dept.png")
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
.icon-duty {
|
|
|
- background: url('@/assets/images/threePreventionResponsiblePerson/duty.png') no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/duty.png")
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
.icon-telephone {
|
|
|
- background: url('@/assets/images/threePreventionResponsiblePerson/phone.png') no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/phone.png")
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
.icon-responsibility {
|
|
|
- background: url('@/assets/images/threePreventionResponsiblePerson/responsibility.png') no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/responsibility.png")
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
.icon-name,
|
|
|
.icon-phone,
|
|
|
@@ -311,7 +367,7 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.common-input {
|
|
|
- border: 1px solid #DCE0EE;
|
|
|
+ border: 1px solid #dce0ee;
|
|
|
border-radius: 2px;
|
|
|
min-height: 30px;
|
|
|
line-height: 30px;
|
|
|
@@ -319,7 +375,7 @@ onMounted(() => {
|
|
|
padding: 0 18px 0 5px;
|
|
|
position: relative;
|
|
|
&::after {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: 0;
|
|
|
@@ -334,7 +390,7 @@ onMounted(() => {
|
|
|
font-size: 16px;
|
|
|
.text2 {
|
|
|
font-size: 12px;
|
|
|
- color: #A3A7AD;
|
|
|
+ color: #a3a7ad;
|
|
|
letter-spacing: 0;
|
|
|
line-height: 26px;
|
|
|
}
|
|
|
@@ -347,7 +403,8 @@ onMounted(() => {
|
|
|
.empty-bg {
|
|
|
width: 220px;
|
|
|
height: 190px;
|
|
|
- background: url("@/assets/images/threePreventionResponsiblePerson/empty.png") no-repeat;
|
|
|
+ background: url("@/assets/images/threePreventionResponsiblePerson/empty.png")
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.empty-text1 {
|
|
|
@@ -358,12 +415,12 @@ onMounted(() => {
|
|
|
.empty-text2 {
|
|
|
font-size: 14px;
|
|
|
line-height: 26px;
|
|
|
- color: #A3A7AD;
|
|
|
+ color: #a3a7ad;
|
|
|
text-align: center;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.primary-btn2 {
|
|
|
- width: 320px;
|
|
|
+ width: 320px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
