<script setup>
|
import { ref, onMounted, reactive, computed } from "vue";
|
// import { getAreaTreeApi } from "@/api/area";
|
// import { formatAreaTree } from "@/utils/tree";
|
import { updateStation, addStation } from "@/api/station.js";
|
import useElement from "@/hooks/useElement.js";
|
import useStation from '@/hooks/useStationList.js';
|
const {
|
stationName1,
|
stationName2,
|
stationName3,
|
stationName4,
|
stationList1,
|
stationList2,
|
stationList3,
|
stationList4,
|
getProviceList, getCityList, getCountryList, getStationList
|
} = useStation();
|
|
|
const { $loading, $message, $confirm } = useElement();
|
const areaList = ref([]);
|
const emit = defineEmits(["close", "ok"]);
|
const formRef = ref();
|
const typeList = ref([
|
|
]);
|
const productList = ref([
|
|
]);
|
const rules = {
|
stationName1: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationName2: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationName3: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationName4: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
};
|
const formLock = reactive({
|
stationId: '',
|
stationName1: stationName1.value,
|
stationName2: stationName2.value,
|
stationName3: stationName3.value,
|
stationName4: stationName4.value
|
});
|
|
|
const layout = {
|
gutter: 16,
|
span: 12,
|
};
|
|
function stationNameChange(idx, val) {
|
console.log('idx, val', idx, val, '=============');
|
|
switch (idx) {
|
case 1:
|
stationName1.value = val;
|
formLock.stationName2 = '';
|
formLock.stationName3 = '';
|
formLock.stationName4 = '';
|
break;
|
case 2:
|
stationName2.value = val;
|
formLock.stationName3 = '';
|
formLock.stationName4 = '';
|
break;
|
case 3:
|
stationName3.value = val;
|
formLock.stationName4 = '';
|
break; default:
|
break;
|
}
|
}
|
|
const lockTypes = ref([
|
{
|
label: "实体锁",
|
value: 3,
|
},
|
]);
|
|
const props = defineProps({
|
info: {
|
type: Object,
|
},
|
isAdd: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
function ok() {
|
if (props.isAdd) {
|
add();
|
} else {
|
update();
|
}
|
}
|
|
|
async function add() {
|
let valid = await formRef.value.validate(() => { });
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
let params = {
|
stationName1: formLock.stationName1,
|
stationName2: formLock.stationName2,
|
stationName3: formLock.stationName3,
|
stationName4: formLock.stationName4,
|
};
|
let loading = $loading();
|
addStation(params)
|
.then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
emit("ok");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
|
async function update() {
|
// lockId lockName areaId lockType
|
let valid = await formRef.value.validate(() => { });
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let params = {
|
stationId: formLock.stationId,
|
stationName1: formLock.stationName1,
|
stationName2: formLock.stationName2,
|
stationName3: formLock.stationName3,
|
stationName4: formLock.stationName4,
|
};
|
let loading = $loading();
|
updateStation(params)
|
.then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
emit("ok");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
|
function close() {
|
emit("close");
|
}
|
|
|
onMounted(async() => {
|
if (!props.isAdd) {
|
console.log("info ", props.info, "=============");
|
formLock.stationId = props.info.stationId;
|
formLock.stationName1 = props.info.stationName1;
|
formLock.stationName2 = props.info.stationName2;
|
formLock.stationName3 = props.info.stationName3;
|
formLock.stationName4 = props.info.stationName4;
|
|
await getProviceList();
|
stationName1.value = props.info.stationName1;
|
await getCityList();
|
stationName2.value = props.info.stationName2;
|
await getCountryList();
|
stationName3.value = props.info.stationName3;
|
await getStationList();
|
stationName4.value = props.info.stationName4;
|
|
}
|
});
|
</script>
|
|
<template>
|
<el-form
|
ref="formRef"
|
label-position="left"
|
label-width="auto"
|
:model="formLock"
|
:rules="rules"
|
style="max-width: 680px"
|
>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<!-- 省 -->
|
<el-form-item label="省" label-position="right" prop="stationName1">
|
<!-- <el-input v-model="formLock.stationName1"></el-input> -->
|
<el-select
|
v-model="formLock.stationName1"
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="(val) => stationNameChange(1, val)"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList1"
|
:key="'province_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<!-- 市 -->
|
<el-form-item label="市" label-position="right" prop="stationName2">
|
<!-- <el-input v-model="formLock.stationName2"></el-input> -->
|
<el-select
|
v-model="formLock.stationName2"
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="(val) => stationNameChange(2, val)"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList2"
|
:key="'list2_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<!-- 区县 -->
|
<el-form-item label="区县" label-position="right" prop="stationName3">
|
<!-- <el-input v-model="formLock.stationName3"></el-input> -->
|
<el-select
|
v-model="formLock.stationName3"
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="(val) => stationNameChange(3, val)"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList3"
|
:key="'list3_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<!-- 机房 -->
|
<el-form-item label="机房" label-position="right" prop="stationName4">
|
<!-- <el-input v-model="formLock.stationName4"></el-input> -->
|
<el-select
|
v-model="formLock.stationName4"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList4"
|
:key="'list4_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="footer">
|
<el-button @click="close">取消</el-button>
|
<el-button type="primary" @click="ok">确定</el-button>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
:deep(.select) {
|
width: 100%;
|
}
|
|
.footer {
|
text-align: right;
|
}
|
</style>
|
