md
This commit is contained in:
linfso
parent
493394f463
commit
7f05d003a2
301
src/views/emis/common/RegionSelect.vue
Normal file
301
src/views/emis/common/RegionSelect.vue
Normal file
@ -0,0 +1,301 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-form
|
||||||
|
:size="'small'"
|
||||||
|
:inline="true"
|
||||||
|
:model="ruleForm"
|
||||||
|
ref="ruleForm"
|
||||||
|
label-width="120px"
|
||||||
|
label-position="left"
|
||||||
|
:rules="addRules"
|
||||||
|
>
|
||||||
|
<div class="scan_title">展示:</div>
|
||||||
|
<!-- 自定义清除方法，注意change方法在clear前执行 -->
|
||||||
|
<el-row>
|
||||||
|
<el-form-item label="省/州" prop="firstId">
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
v-model="ruleForm.firstId"
|
||||||
|
placeholder="请选择省/州"
|
||||||
|
@change="changeFirst"
|
||||||
|
@clear="handleClearFirstId"
|
||||||
|
style="width: 220px"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in allFirstList"
|
||||||
|
:key="item.firstId"
|
||||||
|
:label="item.firstNo"
|
||||||
|
:value="item.firstId"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="市" prop="secondId">
|
||||||
|
<el-select
|
||||||
|
style="width: 220px"
|
||||||
|
v-model="ruleForm.secondId"
|
||||||
|
placeholder="请选择次级省/州"
|
||||||
|
@change="changeSecond"
|
||||||
|
@clear="handleClearSecondId"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in allSecondList"
|
||||||
|
:key="item.secondId"
|
||||||
|
:label="item.secondNo"
|
||||||
|
:value="item.secondId"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="三级选项：" prop="thirdId">
|
||||||
|
<el-select
|
||||||
|
style="width: 220px"
|
||||||
|
v-model="ruleForm.thirdId"
|
||||||
|
placeholder="请选择三级选项编号"
|
||||||
|
@change="changeThird"
|
||||||
|
value-key="thirdId"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in allThirdList"
|
||||||
|
:key="item.thirdId"
|
||||||
|
:label="item.thirdNo"
|
||||||
|
:value="item.thirdId"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "LinkingSelect",
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedLabelList: [],
|
||||||
|
filSelectedLabels: [],
|
||||||
|
refreshKey: 0,
|
||||||
|
ruleForm: {},
|
||||||
|
dynamicTags: [],
|
||||||
|
tagVisible: false,
|
||||||
|
allFirstList: [],
|
||||||
|
allSecondList: [],
|
||||||
|
allThirdList: [],
|
||||||
|
addRules: {
|
||||||
|
firstId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: "change,blur",
|
||||||
|
message: "请选择一级选项",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
secondId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: "change,blur",
|
||||||
|
message: "请选择次级选项",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
thirdId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: "change,blur",
|
||||||
|
message: "请选择三级选项",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.handleGetAllFirst();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 清除次级选择以及子孙选择的内容
|
||||||
|
handleClearSecondId() {
|
||||||
|
this.ruleForm.secondId = "";
|
||||||
|
this.ruleForm.thirdId = "";
|
||||||
|
this.allThirdList = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除一级选择以及子孙选择的内容
|
||||||
|
handleClearFirstId() {
|
||||||
|
this.ruleForm.firstId = "";
|
||||||
|
this.ruleForm.secondId = "";
|
||||||
|
this.ruleForm.thirdId = "";
|
||||||
|
this.allThirdList = [];
|
||||||
|
this.allSecondList = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除最后一级选择的内容并刷新
|
||||||
|
changeThird() {
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
changeSecond(secondId) {
|
||||||
|
this.ruleForm.thirdId = "";
|
||||||
|
// 判断是否为空字符串
|
||||||
|
if (secondId && secondId !== "") {
|
||||||
|
// 请求接口
|
||||||
|
// getThird({
|
||||||
|
// secondId: secondId,
|
||||||
|
// fileId: this.ruleForm.fileId,
|
||||||
|
// }).then((res) => {
|
||||||
|
// this.allThirdList = res.data;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// 模拟数据
|
||||||
|
this.allThirdList = [
|
||||||
|
{
|
||||||
|
createBy: "admin",
|
||||||
|
createTime: "2023-03-27 10:24:30",
|
||||||
|
updateBy: "",
|
||||||
|
updateTime: null,
|
||||||
|
remark: null,
|
||||||
|
thirdId: 3,
|
||||||
|
thirdNo: "H0",
|
||||||
|
leftCapacity: 1,
|
||||||
|
totalCapacity: 5,
|
||||||
|
secondNo: "X0",
|
||||||
|
secondId: 11,
|
||||||
|
firstNo: "G0",
|
||||||
|
firstId: 11,
|
||||||
|
manageBy: "admin",
|
||||||
|
delFlag: "0",
|
||||||
|
deptId: 100,
|
||||||
|
deptName: "xx科技",
|
||||||
|
beginTime: null,
|
||||||
|
endTime: null,
|
||||||
|
userId: null,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
changeFirst(firstId) {
|
||||||
|
this.ruleForm.secondId = "";
|
||||||
|
this.ruleForm.thirdId = "";
|
||||||
|
|
||||||
|
if (firstId !== "") {
|
||||||
|
// 请求接口
|
||||||
|
// getSecond({
|
||||||
|
// firstId: firstId,
|
||||||
|
// fileId: this.ruleForm.fileId,
|
||||||
|
// }).then((res) => {
|
||||||
|
// this.allSecondList = res.data;
|
||||||
|
// });
|
||||||
|
// 模拟数据
|
||||||
|
this.allSecondList = [
|
||||||
|
{
|
||||||
|
createBy: "admin",
|
||||||
|
createTime: "2023-03-27 10:24:10",
|
||||||
|
updateBy: "",
|
||||||
|
updateTime: null,
|
||||||
|
remark: null,
|
||||||
|
secondId: 11,
|
||||||
|
secondNo: "X0",
|
||||||
|
leftCapacity: 4,
|
||||||
|
totalCapacity: 5,
|
||||||
|
firstId: 11,
|
||||||
|
firstNo: "G0",
|
||||||
|
manageBy: "admin",
|
||||||
|
delFlag: "0",
|
||||||
|
deptId: 100,
|
||||||
|
deptName: "xx科技",
|
||||||
|
userId: null,
|
||||||
|
thirdId: null,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleGetAllFirst() {
|
||||||
|
// getFirst({
|
||||||
|
// fileId: this.ruleForm.fileId,
|
||||||
|
// }).then((res) => {
|
||||||
|
// this.allFirstList = res.data;
|
||||||
|
// });
|
||||||
|
|
||||||
|
this.allFirstList = [
|
||||||
|
{
|
||||||
|
createBy: "admin",
|
||||||
|
createTime: "2023-03-27 10:23:57",
|
||||||
|
updateBy: "",
|
||||||
|
updateTime: null,
|
||||||
|
remark: null,
|
||||||
|
firstId: 11,
|
||||||
|
firstNo: "G0",
|
||||||
|
leftCapacity: 5,
|
||||||
|
totalCapacity: 5,
|
||||||
|
manageBy: "admin",
|
||||||
|
delFlag: "0",
|
||||||
|
deptId: 100,
|
||||||
|
deptName: "若依科技",
|
||||||
|
beginTime: null,
|
||||||
|
endTime: null,
|
||||||
|
userId: null,
|
||||||
|
fileCate: null,
|
||||||
|
secondId: null,
|
||||||
|
thirdId: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
createBy: "aduser",
|
||||||
|
createTime: "2023-03-27 10:15:12",
|
||||||
|
updateBy: "",
|
||||||
|
updateTime: null,
|
||||||
|
remark: null,
|
||||||
|
firstId: 6,
|
||||||
|
firstNo: "G1",
|
||||||
|
leftCapacity: 0,
|
||||||
|
totalCapacity: 5,
|
||||||
|
manageBy: "aduser",
|
||||||
|
delFlag: "0",
|
||||||
|
deptId: 201,
|
||||||
|
deptName: "管理部",
|
||||||
|
beginTime: null,
|
||||||
|
endTime: null,
|
||||||
|
userId: null,
|
||||||
|
fileCate: null,
|
||||||
|
secondId: null,
|
||||||
|
thirdId: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
createBy: "aduser2",
|
||||||
|
createTime: "2023-03-27 10:00:14",
|
||||||
|
updateBy: "aduser2",
|
||||||
|
updateTime: "2023-03-27 10:14:31",
|
||||||
|
remark: null,
|
||||||
|
firstId: 1,
|
||||||
|
firstNo: "G11",
|
||||||
|
leftCapacity: 0,
|
||||||
|
totalCapacity: 5,
|
||||||
|
manageBy: "aduser2",
|
||||||
|
delFlag: "0",
|
||||||
|
deptId: 207,
|
||||||
|
deptName: "管理一部",
|
||||||
|
beginTime: null,
|
||||||
|
endTime: null,
|
||||||
|
userId: null,
|
||||||
|
fileCate: null,
|
||||||
|
secondId: null,
|
||||||
|
thirdId: null,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -10,18 +10,18 @@
|
|||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="" prop="quoteCode">
|
<!-- <el-form-item label="" prop="quoteCode">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.quoteCode"
|
v-model="queryParams.quoteCode"
|
||||||
placeholder="报价编码"
|
placeholder="报价编码"
|
||||||
clearable
|
clearable
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="" prop="useSiteCode">
|
<el-form-item label="" prop="useSiteCode">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.useSiteCode"
|
v-model="queryParams.useSiteCode"
|
||||||
placeholder="使用站点代码"
|
placeholder="报价网点编码"
|
||||||
clearable
|
clearable
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
@ -29,7 +29,7 @@
|
|||||||
<el-form-item label="" prop="useSite">
|
<el-form-item label="" prop="useSite">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.useSite"
|
v-model="queryParams.useSite"
|
||||||
placeholder="使用站点名称"
|
placeholder="报价网点名称"
|
||||||
clearable
|
clearable
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
@ -74,7 +74,7 @@
|
|||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="" prop="soonPieceType">
|
<!-- <el-form-item label="" prop="soonPieceType">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.soonPieceType"
|
v-model="queryParams.soonPieceType"
|
||||||
placeholder="soon_piece_type"
|
placeholder="soon_piece_type"
|
||||||
@ -233,7 +233,7 @@
|
|||||||
clearable
|
clearable
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user