127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<template>
|
|
<div class="ca-apply">
|
|
<Form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
|
<FormItem label="真实姓名" v-bind="validateInfos.idCardName">
|
|
<Input v-model:value="form.idCardName" :disabled="disableEdit" />
|
|
</FormItem>
|
|
<FormItem label="身份证号码" v-bind="validateInfos.idCardNo">
|
|
<Input v-model:value="form.idCardNo" :disabled="disableEdit" />
|
|
</FormItem>
|
|
<FormItem label="所在单位名称" v-bind="validateInfos.unitName">
|
|
<Select v-model:value="form.unitName" :disabled="disableEdit">
|
|
<Option
|
|
v-for="organize in organizeList"
|
|
:key="organize.id"
|
|
:value="organize.name"
|
|
>{{ organize.name }}</Option
|
|
>
|
|
</Select>
|
|
</FormItem>
|
|
<FormItem label="手机号码" v-bind="validateInfos.phone">
|
|
<Input v-model:value="form.phone" :disabled="disableEdit" />
|
|
</FormItem>
|
|
<FormItem label="收件人" v-bind="validateInfos.idCardNo">
|
|
<Input v-model:value="form.receiverName" :disadbled="disableEdit" />
|
|
</FormItem>
|
|
<FormItem label="联系电话" v-bind="validateInfos.idCardNo">
|
|
<Input v-model:value="form.receiverPhone" :disadbled="disableEdit" />
|
|
</FormItem>
|
|
<FormItem label="邮寄地址" v-bind="validateInfos.address">
|
|
<Input v-model:value="form.address" :disabled="disableEdit" />
|
|
</FormItem>
|
|
<FormItem :wrapperCol="{ span: 10, offset: 8 }">
|
|
<Button type="primary" @click="onSubmit">前往申领</Button>
|
|
<Button style="margin-left: 10px" @click="changeDisabled"
|
|
>历史申领记录</Button
|
|
>
|
|
</FormItem>
|
|
</Form>
|
|
</div>
|
|
<Drawer title="历史申领记录" placement="right" :closable="false"> </Drawer>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.ca-apply {
|
|
width: 600px;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { Form, Input, Button, Select, Drawer, message } from "ant-design-vue";
|
|
import { onMounted, reactive, ref, toRaw } from "vue";
|
|
import { useForm } from "@ant-design-vue/use";
|
|
import { get } from "@/services/http";
|
|
export default {
|
|
components: {
|
|
Form,
|
|
Input,
|
|
FormItem: Form.Item,
|
|
Button,
|
|
Select,
|
|
Option: Select.Option,
|
|
Drawer
|
|
},
|
|
setup() {
|
|
//界面初始化
|
|
var organizeList = ref([]);
|
|
var userApplyList = ref([]);
|
|
onMounted(async () => {
|
|
const res = await get("/api2/UserInfo/Organize");
|
|
if (res.errorCode != 0) {
|
|
message.error(res.errorMsg);
|
|
}
|
|
organizeList.value = res.data;
|
|
const listRes = await get("/api2/CA/UserApplyList");
|
|
if (res.errorCode != 0) {
|
|
message.error(res.errorMsg);
|
|
}
|
|
userApplyList.value = listRes;
|
|
});
|
|
const formRef = reactive({
|
|
idCardName: "",
|
|
idCardNo: "",
|
|
phone: "",
|
|
unitName: ""
|
|
});
|
|
const rulesRef = reactive({
|
|
idCardName: [
|
|
{ required: true, message: "请输入18位身份证号码", trigger: "blur" }
|
|
],
|
|
idCardId: [
|
|
{ required: true, message: "请输入18位身份证号码", trigger: "blur" }
|
|
],
|
|
phone: [
|
|
{ required: true, message: "请输入18位身份证号码", trigger: "blur" }
|
|
],
|
|
unitName: [
|
|
{ required: true, message: "请输入18位身份证号码", trigger: "change" }
|
|
]
|
|
});
|
|
const { validate, validateInfos } = useForm(formRef, rulesRef);
|
|
|
|
var disableEdit = ref(false);
|
|
const changeDisabled = function() {
|
|
disableEdit.value = !disableEdit.value;
|
|
console.log(disableEdit);
|
|
};
|
|
const onSubmit = function() {
|
|
validate()
|
|
.then(() => {
|
|
console.log(toRaw(formRef));
|
|
})
|
|
.catch(e => {
|
|
console.log(e);
|
|
});
|
|
};
|
|
return {
|
|
labelCol: { span: 8 },
|
|
wrapperCol: { span: 10 },
|
|
form: formRef,
|
|
disableEdit,
|
|
changeDisabled,
|
|
validateInfos,
|
|
onSubmit,
|
|
organizeList
|
|
};
|
|
}
|
|
};
|
|
</script>
|