124
This commit is contained in:
279
src/views/backOfficeSystem/kaoQinGL/QingJiaXX/editAddForm.vue
Normal file
279
src/views/backOfficeSystem/kaoQinGL/QingJiaXX/editAddForm.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<!-- 勤务作息编辑新增 -->
|
||||
<div class="dialog" v-if="isShowDialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ isAdd ? "新增" : "修改" }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="onSave"
|
||||
:loading="buttonLoading"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-content">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:label-width="140"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
inline
|
||||
>
|
||||
<div class="content">
|
||||
<el-form-item
|
||||
v-if="isAdd"
|
||||
style="width: 48%"
|
||||
class="form-item"
|
||||
prop="dqwd"
|
||||
label="地球经度"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model="formData.dqwd"
|
||||
:disabled="isDetail"
|
||||
placeholder="请输入地球经度"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="isAdd"
|
||||
style="width: 48%"
|
||||
class="form-item"
|
||||
prop="dqjd"
|
||||
label="地球纬度"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model="formData.dqjd"
|
||||
:disabled="isDetail"
|
||||
placeholder="请输入地球纬度"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 48%"
|
||||
class="form-item"
|
||||
prop="qzDd"
|
||||
label="签注地点"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.qzDd"
|
||||
:disabled="!isAdd"
|
||||
placeholder="请输入签注地点"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
style="width: 48%"
|
||||
class="form-item"
|
||||
prop="qzSm"
|
||||
label="签注说明"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.qzSm"
|
||||
:disabled="isDetail"
|
||||
placeholder="请输入签注说明"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="isDetail"
|
||||
style="width: 48%"
|
||||
class="form-item"
|
||||
prop="qzrSfzh"
|
||||
label="签注人身份证号"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.qzrSfzh"
|
||||
disabled
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="isDetail"
|
||||
style="width: 48%"
|
||||
class="form-item"
|
||||
prop="qzrXm"
|
||||
label="签注人姓名"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.qzrXm"
|
||||
disabled
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { serviceGet, servicePost } from "@/api/serviceApi.js";
|
||||
import { reactive, ref, getCurrentInstance, defineEmits } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
// import Department from "./department.vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
// const { D_BZ_SF} = proxy.$dict("D_BZ_SF");
|
||||
const props = defineProps({
|
||||
// dic: Object
|
||||
});
|
||||
|
||||
const emits = defineEmits(["updateList"]);
|
||||
const loading = ref(false); // 加载
|
||||
const formRef = ref(); // 表单验证
|
||||
const formDataDefault = ref({});
|
||||
const formData = ref({});
|
||||
|
||||
const isAdd = ref(false); // 是否是新增状态
|
||||
const isShowDialog = ref(false); //弹窗
|
||||
const dialogType = ref(0); // add 新增 edit编辑 detail详情
|
||||
const isDetail = ref(false);
|
||||
const rules = reactive({
|
||||
dqjd: [{ required: false, message: "请填写地球纬度", trigger: "blur" }],
|
||||
dqwd: [{ required: false, message: "请填写地球经度", trigger: "blur" }],
|
||||
|
||||
qzDd: [{ required: true, message: "请输入签注地点", trigger: "blur" }],
|
||||
qzSm: [{ message: "请输入签注说明", trigger: "blur" }]
|
||||
|
||||
// qzrSfzh: [{ required: true, message: "请输入签注人身份证号", trigger: "blur" }],
|
||||
// qzrXm: [{ required: true, message: "请输入签注人姓名", trigger: "blur" }]
|
||||
});
|
||||
/**部门id对照对象 */
|
||||
let departmentIdObj = {};
|
||||
const init = (type, row) => {
|
||||
isShowDialog.value = true; // 显示新增编辑dialog框
|
||||
isAdd.value = type == "add" ? true : false;
|
||||
dialogType.value = type;
|
||||
isDetail.value = type === "detail";
|
||||
// 是否有填充数据
|
||||
departmentIdObj = {};
|
||||
if (row) {
|
||||
|
||||
let {
|
||||
id,
|
||||
dqjd,
|
||||
dqwd,
|
||||
qzDd,
|
||||
|
||||
qzSm,
|
||||
qzrSfzh,
|
||||
qzrXm
|
||||
} = row;
|
||||
// 新增从本地取
|
||||
if (type == "add") {
|
||||
qzrSfzh = localStorage.getItem("idEntityCard"); // 身份证
|
||||
qzrXm = localStorage.getItem("USERNAME"); //姓名
|
||||
}
|
||||
formData.value = {
|
||||
id,
|
||||
dqwd,
|
||||
dqjd,
|
||||
qzDd,
|
||||
|
||||
qzSm,
|
||||
qzrSfzh,
|
||||
qzrXm
|
||||
};
|
||||
// 新增
|
||||
} else {
|
||||
}
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const reserForm = () => {
|
||||
formData.value = JSON.parse(JSON.stringify(formDataDefault.value));
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
isShowDialog.value = false;
|
||||
loading.value = false;
|
||||
formData.value = JSON.parse(JSON.stringify(formDataDefault.value));
|
||||
};
|
||||
// 保存
|
||||
const onSave = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
let params = { ...formData.value };
|
||||
params.qzrSfzh = localStorage.getItem("idEntityCard"); // 身份证
|
||||
params.qzrXm = localStorage.getItem("USERNAME"); // 姓名
|
||||
if (params.dqjd) params.dqjd = Number(params.dqjd);
|
||||
if (params.dqwd) params.dqwd = Number(params.dqwd);
|
||||
|
||||
let url = isAdd.value ? "/tbQwglZxqz/save" : "/tbQwglZxqz/update";
|
||||
let text = isAdd.value ? "新增成功" : "编辑成功";
|
||||
servicePost(params, `/mosty-qwzx${url}`)
|
||||
.then((res) => {
|
||||
closeDialog();
|
||||
proxy.$message.success(text);
|
||||
emits("updateList", {});
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.form-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.bblxItem {
|
||||
line-height: 40px;
|
||||
min-height: 40px;
|
||||
// display: flex;
|
||||
.btItem {
|
||||
width: 180px;
|
||||
padding: 7px 0;
|
||||
background: #e9e9e9;
|
||||
color: #000;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
background: #f2f2f2;
|
||||
margin-top: 1px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.subBtn {
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10px 40px;
|
||||
}
|
||||
.dialog {
|
||||
&::v-deep .el-form--inline {
|
||||
padding: 0 !important;
|
||||
}
|
||||
&::v-deep .el-input__inner {
|
||||
border: 1px solid #d5d2d2;
|
||||
}
|
||||
|
||||
}
|
||||
.dialog .el-form-item--default.form-item {
|
||||
width: calc(50% - 100px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.department-list {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.department-item {
|
||||
color: #000;
|
||||
margin-left: 20px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user