品牌型号选择器
This commit is contained in:
“hhk”
parent
92c5d66f51
commit
14404f023e
11
src/layout/components/CarBrandSelector/Api/index.js
Normal file
11
src/layout/components/CarBrandSelector/Api/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建车辆品牌维护
|
||||
export function searchBrand(data) {
|
||||
return request({
|
||||
url: '/base/carModel/searchBrand',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,104 +1,140 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-cascader
|
||||
:options="options"
|
||||
:props="cascaderProps"
|
||||
v-model="selectedOptions"
|
||||
@visible-change="handleVisibleChange"
|
||||
:filter-method="handleFilter"
|
||||
placeholder="请选择"
|
||||
filterable
|
||||
:show-all-levels="false"
|
||||
/>
|
||||
<div class="block">
|
||||
<el-cascader v-model="selectedOptions" placeholder="请选择" :options="options" :filter-method="handleFilter"
|
||||
:debounce="500" :show-all-levels="false" filterable clearable />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import * as CarBrandSelectorApi from '@/layout/components/CarBrandSelector/Api';
|
||||
export default {
|
||||
watch: {
|
||||
selectedOptions(newVal, oldVal) {
|
||||
console.log("newS is ", newVal);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [], // 存储级联选项数据
|
||||
selectedOptions: [], // 存储已选择的选项
|
||||
loading: false, // 标志是否在加载数据
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
cascaderProps() {
|
||||
return {
|
||||
lazy: true, // 启用懒加载
|
||||
lazyLoad: this.loadData, // 懒加载方法
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children',
|
||||
emitPath: false,
|
||||
multiple: false // 多选模式
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// 当可见状态变化时触发
|
||||
handleVisibleChange(visible) {
|
||||
if (visible && this.options.length === 0) {
|
||||
this.loadData(null, [], (options) => {
|
||||
this.options = options;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 懒加载数据方法
|
||||
loadData(node, resolve) {
|
||||
if (node) {
|
||||
// 模拟异步加载子节点数据
|
||||
setTimeout(() => {
|
||||
const children = [
|
||||
{ value: 'child1', label: '子节点 1' },
|
||||
{ value: 'child2', label: '子节点 2' },
|
||||
];
|
||||
resolve(children);
|
||||
}, 100);
|
||||
} else {
|
||||
// 模拟异步加载根节点数据
|
||||
setTimeout(() => {
|
||||
const root = [
|
||||
{ value: 'root1', label: '根节点 1' },
|
||||
{ value: 'root2', label: '根节点 2' },
|
||||
];
|
||||
resolve(root);
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
// 处理过滤方法
|
||||
handleFilter(inputValue, path) {
|
||||
console.log('Filtering:', inputValue);
|
||||
// 模拟请求
|
||||
setTimeout(() => {
|
||||
const filteredOptions = [
|
||||
{
|
||||
value: 'filtered1',
|
||||
label: `Filtered ${inputValue} 1`,
|
||||
children: [
|
||||
{ value: 'filtered1-1', label: `Filtered ${inputValue} 1-1` },
|
||||
{ value: 'filtered1-2', label: `Filtered ${inputValue} 1-2` },
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'filtered2',
|
||||
label: `Filtered ${inputValue} 2`,
|
||||
children: [
|
||||
{ value: 'filtered2-1', label: `Filtered ${inputValue} 2-1` },
|
||||
{ value: 'filtered2-2', label: `Filtered ${inputValue} 2-2` },
|
||||
],
|
||||
},
|
||||
];
|
||||
this.options = filteredOptions;
|
||||
}, 1000); // 模拟延迟
|
||||
},
|
||||
// 处理过滤方法
|
||||
handleFilter(node, keyword) {
|
||||
console.log(keyword, 'Filtering:');
|
||||
//请求相关选项
|
||||
this.getData(keyword);
|
||||
// this.options =
|
||||
|
||||
// const filteredOptions = [
|
||||
// {
|
||||
// value: 'filtered1',
|
||||
// label: `Filtered ${inputValue} 1`,
|
||||
// children: [
|
||||
// { value: 'filtered1-1', label: `Filtered ${inputValue} 1-1` },
|
||||
// { value: 'filtered1-2', label: `Filtered ${inputValue} 1-2` },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// value: 'filtered2',
|
||||
// label: `Filtered ${inputValue} 2`,
|
||||
// children: [
|
||||
// { value: 'filtered2-1', label: `Filtered ${inputValue} 2-1` },
|
||||
// { value: 'filtered2-2', label: `Filtered ${inputValue} 2-2` },
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
// this.options = filteredOptions;
|
||||
},
|
||||
getData(keyword) {
|
||||
let param = {
|
||||
modelName: keyword,
|
||||
}
|
||||
CarBrandSelectorApi.searchBrand(param).then(res => {
|
||||
this.options = res.data
|
||||
this.options = res.data
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
changedOptionsForTest() {
|
||||
this.options = [{
|
||||
value: 'zhinan',
|
||||
label: '指北',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '指北1',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致',
|
||||
children: [{
|
||||
value: 'sadme',
|
||||
label: 'how sad me'
|
||||
}]
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '指北2',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
},]
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
selectedOptions: [], // 存储已选择的选项
|
||||
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '指北',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '指北1',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致',
|
||||
children: [{
|
||||
value: 'sadme',
|
||||
label: 'how sad me'
|
||||
}]
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '指北2',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
},], //选项集合
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
185
src/views/base/carmain/components/CarLabelForm.vue
Normal file
185
src/views/base/carmain/components/CarLabelForm.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>车辆基本信息</span>
|
||||
</div>
|
||||
<el-descriptions class="margin-top" :column="3" border>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
车牌号
|
||||
</template>
|
||||
{{ formData.licenseNumber }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
车辆品牌
|
||||
</template>
|
||||
<!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
|
||||
{{ formData.carBrand }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
车辆型号
|
||||
</template>
|
||||
<!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
|
||||
{{ formData.carModel }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
车架号
|
||||
</template>
|
||||
{{ formData.vin }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
发动机号码
|
||||
</template>
|
||||
{{ formData.engineNumber }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
车辆注册日期
|
||||
</template>
|
||||
{{ parseTime(formData.carRegisterDate, '{y}-{m}-{d}') }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
车辆性质
|
||||
</template>
|
||||
<dict-tag :type="DICT_TYPE.DICT_CAR_NATURE" :value="formData.carNature" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
车辆类别
|
||||
</template>
|
||||
<dict-tag :type="DICT_TYPE.DICT_CAR_CATEGORY" :value="formData.carCategory" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
最近办理业务
|
||||
</template>
|
||||
<dict-tag :type="DICT_TYPE.DICT_CUS_BUSI_TYPE" :value="formData.recentlyHandledBusiness" />
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>车辆标签</span>
|
||||
<el-button @click="openBusiLabel" style="float: right; padding: 3px 0" type="text">打标签</el-button>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-empty v-if="formData.labelList.length == 0" description="暂无标签信息" :image-size="100"></el-empty>
|
||||
<template v-for="item in formData.labelList">
|
||||
<el-popover placement="top-start" width="200" trigger="hover" :content="item.labelContent">
|
||||
<el-tag style="margin-left: 5px" :key="item.id" closable @close="tagClose(item)" slot="reference"
|
||||
:type="item.labelType">
|
||||
{{ item.labelName }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<BusiLabelForm ref="busiLabelForm" @ok="setLabel" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as CarMainApi from '@/api/base/carmain';
|
||||
import * as CustomerMainApi from '@/api/base/customer';
|
||||
import BusiLabelForm from '@/views/base/label/BusiLabelForm.vue';
|
||||
export default {
|
||||
name: "CustomerLabelForm",
|
||||
components: { BusiLabelForm },
|
||||
data() {
|
||||
return {
|
||||
// 弹出层标题
|
||||
dialogTitle: "",
|
||||
// 是否显示弹出层
|
||||
dialogVisible: false,
|
||||
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
formLoading: false,
|
||||
//回参
|
||||
formData: {
|
||||
labelList: [],
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/** 删除标签 */
|
||||
tagClose(row) {
|
||||
let id1 = this.formData.labelList.findIndex(item => {
|
||||
if (item.id == row.id) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
this.formData.labelList.splice(id1, 1)
|
||||
},
|
||||
|
||||
/** 打开弹窗 */
|
||||
async open(id) {
|
||||
this.dialogVisible = true;
|
||||
this.formLoading = true;
|
||||
this.reset()
|
||||
try {
|
||||
const res = await CarMainApi.getCarMain(id);
|
||||
this.formData = res.data
|
||||
this.dialogTitle = "打标签";
|
||||
} finally {
|
||||
this.formLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**删除标签信息*/
|
||||
deleteLabel(row) {
|
||||
this.formData.labelList.forEach((item, index) => {
|
||||
if (item.id == row.id) {
|
||||
this.formData.labelList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**重置*/
|
||||
reset() {
|
||||
this.formData = {
|
||||
labelList: [],
|
||||
}
|
||||
},
|
||||
|
||||
/**设置标签内容*/
|
||||
setLabel(row) {
|
||||
this.formData.labelList.push(JSON.parse(JSON.stringify(row)))
|
||||
},
|
||||
|
||||
/**新增业务标签*/
|
||||
openBusiLabel() {
|
||||
this.$refs["busiLabelForm"].open(this.formData);
|
||||
},
|
||||
|
||||
|
||||
/** 提交按钮 */
|
||||
async submitForm() {
|
||||
this.formLoading = true
|
||||
try {
|
||||
const data = this.formData;
|
||||
await CarMainApi.setLabelList(data);
|
||||
this.$modal.msgSuccess("设置标签成功");
|
||||
this.dialogVisible = false;
|
||||
this.$emit('success');
|
||||
} finally {
|
||||
this.formLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user