105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
|
||
|
|
<el-form-item label="用户名称" prop="name">
|
||
|
|
<el-input v-model="ruleForm.name" placeholder="请输入用户名称" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="电话号码" prop="phone">
|
||
|
|
<el-input :maxlength="11" v-model="ruleForm.phone" placeholder="请输入电话号码" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="警员号" prop="username">
|
||
|
|
<el-input :maxlength="20" v-model="ruleForm.username" placeholder="请输入警员号" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="类型" prop="roleId">
|
||
|
|
<el-select v-model="ruleForm.roleId" placeholder="请选择人员">
|
||
|
|
<el-option v-for="item in comm.roleList" :label="item.name" :value="item.id" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="辖区" prop="orgId">
|
||
|
|
<el-select v-model="ruleForm.orgId" placeholder="请选择辖区">
|
||
|
|
<el-option v-for="item in orgAllData" :label="item.name" :value="item.id" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="状态" prop="status">
|
||
|
|
<el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item class="footr">
|
||
|
|
<el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
|
||
|
|
<el-button @click="emit('close')">取消</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, PropType, reactive, ref } from "vue";
|
||
|
|
import type { FormInstance, FormRules } from "element-plus";
|
||
|
|
import { TDevice, TOrg } from "@/api/index.d";
|
||
|
|
import { useCommonStore } from "@/store/common";
|
||
|
|
import { TAccount } from "@/api/index.d";
|
||
|
|
|
||
|
|
const comm = useCommonStore();
|
||
|
|
const ruleFormRef = ref<FormInstance>();
|
||
|
|
|
||
|
|
const { orgAllData, formData, api } = defineProps({
|
||
|
|
orgAllData: {
|
||
|
|
type: Array as PropType<TOrg.IOrgRecordRes[]>,
|
||
|
|
dfault: () => {},
|
||
|
|
},
|
||
|
|
formData: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
api: {
|
||
|
|
type: Function,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const emit = defineEmits(["close"]);
|
||
|
|
|
||
|
|
const ruleForm = reactive(
|
||
|
|
formData
|
||
|
|
? { ...formData }
|
||
|
|
: {
|
||
|
|
name: "",
|
||
|
|
phone: "",
|
||
|
|
username: "",
|
||
|
|
roleId: "",
|
||
|
|
orgId: "",
|
||
|
|
status: 1,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
onMounted(() => {});
|
||
|
|
const rules = reactive<FormRules<typeof ruleForm>>({
|
||
|
|
name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
|
||
|
|
phone: [
|
||
|
|
{ required: true, message: "请输入电话号码", trigger: "blur" },
|
||
|
|
{ min: 11, message: "请输入11位手机号", trigger: "blur" },
|
||
|
|
],
|
||
|
|
username: [
|
||
|
|
{ required: true, message: "请输入警员号", trigger: "blur" },
|
||
|
|
{ min: 5, message: "警员号长度不能小于5位", trigger: "blur" },
|
||
|
|
],
|
||
|
|
roleId: [{ required: true, message: "请选择人员", trigger: "blur" }],
|
||
|
|
orgId: [{ required: true, message: "请选择辖区", trigger: "blur" }],
|
||
|
|
});
|
||
|
|
|
||
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
||
|
|
if (!formEl) return;
|
||
|
|
formEl.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
api(ruleForm);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="less">
|
||
|
|
.footr {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.footr :deep(.el-form-item__content) {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: flex-end;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
</style>
|