|
@@ -1,367 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
|
|
|
- <el-col :span="24" class="one">
|
|
|
- <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch">
|
|
|
- <template #status>
|
|
|
- <el-option v-for="i in statusList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- </cSearch>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="two">
|
|
|
- <cButton @toAdd="toAdd"> </cButton>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="thr">
|
|
|
- <cTable :fields="fields" :opera="opera" :list="list" @query="search" :total="total" @edit="toEdit" @del="toDel" @changeUse="toChangeUse"> </cTable>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <cDialog :dialog="dialog" @toClose="toClose">
|
|
|
- <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
|
|
|
- <cForm :span="24" :fields="formFields" :form="form" :rules="{}" @save="toSave" label-width="auto">
|
|
|
- <template #shop>
|
|
|
- <el-option v-for="i in shopList" :key="i._id" :label="i.name" :value="i._id"></el-option>
|
|
|
- </template>
|
|
|
- <template #brand>
|
|
|
- <el-select
|
|
|
- v-model="form.brand"
|
|
|
- clearable
|
|
|
- filterable
|
|
|
- remote
|
|
|
- reserve-keyword
|
|
|
- placeholder="请选择品牌"
|
|
|
- remote-show-suffix
|
|
|
- :remote-method="remoteMethod"
|
|
|
- :loading="loading"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-option v-for="item in brandList" :key="item._id" :label="item.name" :value="item.name" />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- <template #use_type>
|
|
|
- <el-option v-for="i in useTypeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #type>
|
|
|
- <el-option v-for="i in boxTypeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #structure>
|
|
|
- <el-option v-for="i in structureList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #emission>
|
|
|
- <el-option v-for="i in emissionList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #energy>
|
|
|
- <el-option v-for="i in energyList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #set>
|
|
|
- <el-option v-for="i in setList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #level>
|
|
|
- <el-option v-for="i in levelList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #drive>
|
|
|
- <el-option v-for="i in driveList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
- </template>
|
|
|
- <template #status>
|
|
|
- <el-radio v-for="i in statusList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
|
|
|
- </template>
|
|
|
- <template #file>
|
|
|
- <cUpload model="file" :list="form.file" :limit="21" url="/files/usedCar/car/upload" listType="picture-card" @change="onUpload"></cUpload>
|
|
|
- </template>
|
|
|
- </cForm>
|
|
|
- </el-col>
|
|
|
- </cDialog>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import { ref, Ref, onMounted, inject } from 'vue';
|
|
|
-// NeedChange
|
|
|
-import { CarStore } from '@/stores/car';
|
|
|
-import { ShopStore } from '@/stores/shop';
|
|
|
-import { BrandStore } from '@/stores/system/brand';
|
|
|
-import { DictDataStore } from '@/stores/system/dictData';
|
|
|
-import type { IQueryResult } from '@/util/types.util';
|
|
|
-import { cloneDeep, get } from 'lodash';
|
|
|
-import baseStore from '@/stores/counter';
|
|
|
-const user = ref(baseStore.state.user);
|
|
|
-onMounted(async () => {
|
|
|
- loading.value = true;
|
|
|
- await searchOther();
|
|
|
- await search({ skip, limit });
|
|
|
- loading.value = false;
|
|
|
-});
|
|
|
-
|
|
|
-const loading: Ref<any> = ref(false);
|
|
|
-// NeedChange
|
|
|
-const store = CarStore();
|
|
|
-const dictDataStore = DictDataStore();
|
|
|
-const shopStore = ShopStore();
|
|
|
-const brandStore = BrandStore();
|
|
|
-const $checkRes = inject('$checkRes') as Function;
|
|
|
-
|
|
|
-// #region 字典
|
|
|
-// NeedChange
|
|
|
-const statusList: Ref<any> = ref([]);
|
|
|
-const shopList: Ref<any> = ref([]);
|
|
|
-const brandList: Ref<any> = ref([]);
|
|
|
-const useTypeList: Ref<any> = ref([]);
|
|
|
-const boxTypeList: Ref<any> = ref([]);
|
|
|
-const structureList: Ref<any> = ref([]);
|
|
|
-const emissionList: Ref<any> = ref([]);
|
|
|
-const energyList: Ref<any> = ref([]);
|
|
|
-const setList: Ref<any> = ref([]);
|
|
|
-const levelList: Ref<any> = ref([]);
|
|
|
-const driveList: Ref<any> = ref([]);
|
|
|
-
|
|
|
-const searchOther = async () => {
|
|
|
- let res: IQueryResult;
|
|
|
- // 是否使用
|
|
|
- res = await dictDataStore.query({ code: 'carType', is_use: '0' });
|
|
|
- if ($checkRes(res)) statusList.value = res.data;
|
|
|
- // 店铺信息
|
|
|
- res = await shopStore.query({ is_use: '0' });
|
|
|
- if ($checkRes(res)) shopList.value = res.data;
|
|
|
- // 品牌
|
|
|
- res = await brandStore.query({ is_use: '0' });
|
|
|
- if ($checkRes(res)) brandList.value = res.data;
|
|
|
- // 车辆使用性质
|
|
|
- res = await dictDataStore.query({ code: 'useType', is_use: '0' });
|
|
|
- if ($checkRes(res)) useTypeList.value = res.data;
|
|
|
- // 变速箱
|
|
|
- res = await dictDataStore.query({ code: 'boxType', is_use: '0' });
|
|
|
- if ($checkRes(res)) boxTypeList.value = res.data;
|
|
|
- // 车身结构
|
|
|
- res = await dictDataStore.query({ code: 'structure', is_use: '0' });
|
|
|
- if ($checkRes(res)) structureList.value = res.data;
|
|
|
- // 排放标准
|
|
|
- res = await dictDataStore.query({ code: 'emission', is_use: '0' });
|
|
|
- if ($checkRes(res)) emissionList.value = res.data;
|
|
|
- // 能源类型
|
|
|
- res = await dictDataStore.query({ code: 'energy', is_use: '0' });
|
|
|
- if ($checkRes(res)) energyList.value = res.data;
|
|
|
- // 座椅
|
|
|
- res = await dictDataStore.query({ code: 'set', is_use: '0' });
|
|
|
- if ($checkRes(res)) setList.value = res.data;
|
|
|
- // 车辆级别
|
|
|
- res = await dictDataStore.query({ code: 'level', is_use: '0' });
|
|
|
- if ($checkRes(res)) levelList.value = res.data;
|
|
|
- // 驱动方式
|
|
|
- res = await dictDataStore.query({ code: 'drive', is_use: '0' });
|
|
|
- if ($checkRes(res)) driveList.value = res.data;
|
|
|
-};
|
|
|
-// #endregion
|
|
|
-
|
|
|
-// #region 查询相关
|
|
|
-let list: Ref<any> = ref([]);
|
|
|
-let total: Ref<number> = ref(0);
|
|
|
-let skip = 0;
|
|
|
-let limit = inject('$limit') as number;
|
|
|
-let searchForm: Ref<any> = ref({});
|
|
|
-
|
|
|
-const search = async (e: { skip: number; limit: number }) => {
|
|
|
- const info = { skip: e.skip, limit: e.limit, ...searchForm.value };
|
|
|
- const res: IQueryResult = await store.query(info);
|
|
|
- if (res.errcode == '0') {
|
|
|
- list.value = res.data;
|
|
|
- total.value = res.total;
|
|
|
- }
|
|
|
-};
|
|
|
-const toSearch = (query) => {
|
|
|
- searchForm.value = query;
|
|
|
- search({ skip, limit });
|
|
|
-};
|
|
|
-const toChangeUse = async (data) => {
|
|
|
- let status = '0';
|
|
|
- switch (data.status) {
|
|
|
- case '0':
|
|
|
- status = '1';
|
|
|
- break;
|
|
|
- case '1':
|
|
|
- status = '0';
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- const udata = { _id: data._id, status: status };
|
|
|
- const res = await store.update(udata);
|
|
|
- if ($checkRes(res, true)) {
|
|
|
- search({ skip: 0, limit });
|
|
|
- }
|
|
|
-};
|
|
|
-// #endregion
|
|
|
-
|
|
|
-// #region 表格及操作
|
|
|
-// NeedChange
|
|
|
-let fields: Ref<any[]> = ref([
|
|
|
- { label: '品牌', model: 'brand', isSearch: true },
|
|
|
- { label: '车型', model: 'series', isSearch: true },
|
|
|
- { label: '年份', model: 'year', isSearch: true },
|
|
|
- { label: '车款', model: 'style', isSearch: true },
|
|
|
- { label: '新车价格', model: 'price' },
|
|
|
- { label: '实付价格', model: 'real_pay' },
|
|
|
- { label: '车龄', model: 'age', isSearch: true },
|
|
|
- { label: '过户次数', model: 'number' },
|
|
|
- { label: '状态', model: 'status', format: (i) => getDict(i, 'status'), isSearch: true, type: 'select' }
|
|
|
-]);
|
|
|
-// 操作
|
|
|
-let opera: Ref<any[]> = ref([
|
|
|
- { label: '修改', method: 'edit' },
|
|
|
- { label: '下架', method: 'changeUse', type: 'warning', confirm: true, display: (i) => i.status === '0' },
|
|
|
- { label: '上架', method: 'changeUse', type: 'success', confirm: true, display: (i) => i.status === '1' },
|
|
|
- { label: '删除', method: 'del', confirm: true, type: 'danger' }
|
|
|
-]);
|
|
|
-// 转化字典表
|
|
|
-const getDict = (data, model) => {
|
|
|
- let list;
|
|
|
- switch (model) {
|
|
|
- case 'status':
|
|
|
- list = statusList.value;
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- if (!list) return;
|
|
|
- const res = list.find((f) => f.value == data);
|
|
|
- return get(res, 'label');
|
|
|
-};
|
|
|
-// 远程搜索品牌
|
|
|
-const remoteMethod = (query: string) => {
|
|
|
- if (query) {
|
|
|
- loading.value = true;
|
|
|
- setTimeout(() => {
|
|
|
- loading.value = false;
|
|
|
- brandList.value = brandList.value.filter((item) => {
|
|
|
- return item.name.toLowerCase().includes(query.toLowerCase());
|
|
|
- });
|
|
|
- }, 200);
|
|
|
- }
|
|
|
-};
|
|
|
-// 新增弹框
|
|
|
-const toAdd = () => {
|
|
|
- formFields.value = formFieldsForCreate;
|
|
|
- // 所属人是自己,需要把自己的id放进去
|
|
|
- form.value = { ...cloneDeep(defaultForm) };
|
|
|
- dialog.value.show = true;
|
|
|
-};
|
|
|
-// 修改弹框
|
|
|
-const toEdit = async (data) => {
|
|
|
- formFields.value = formFieldsForUpdate;
|
|
|
- form.value = { ...data };
|
|
|
- dialog.value.show = true;
|
|
|
-};
|
|
|
-// #endregion
|
|
|
-
|
|
|
-// #region 常规接口
|
|
|
-// 添加/修改
|
|
|
-const toSave = async () => {
|
|
|
- const data = cloneDeep(form.value);
|
|
|
- let res: IQueryResult;
|
|
|
- if (get(data, '_id')) res = await store.update(data);
|
|
|
- else res = await store.create(data);
|
|
|
- if ($checkRes(res, true)) {
|
|
|
- search({ skip: 0, limit });
|
|
|
- toClose();
|
|
|
- }
|
|
|
-};
|
|
|
-// 删除
|
|
|
-const toDel = async (data) => {
|
|
|
- const res = await store.del(data._id);
|
|
|
- if ($checkRes(res, true)) {
|
|
|
- search({ skip: 0, limit });
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// #endregion
|
|
|
-
|
|
|
-// #region 表单及操作
|
|
|
-// NeedChange
|
|
|
-const defaultForm = { status: '0', file: [] };
|
|
|
-const formFields: Ref<any> = ref();
|
|
|
-const dialog: Ref<any> = ref({ title: '数据信息', show: false, type: '1' });
|
|
|
-const form: Ref<any> = ref({ file: [] });
|
|
|
-const formFieldsForCreate = [
|
|
|
- { label: '店铺', model: 'shop', type: 'select' },
|
|
|
- { label: '品牌', model: 'brand', custom: true },
|
|
|
- { label: '年份', model: 'year', type: 'year' },
|
|
|
- { label: '车型', model: 'series' },
|
|
|
- { label: '车款', model: 'style' },
|
|
|
- { label: '过户次数', model: 'number' },
|
|
|
- { label: '车辆识别VIN', model: 'vin' },
|
|
|
- { label: '首次上牌时间', model: 'f_time', type: 'date' },
|
|
|
- { label: '车源地', model: 'place' },
|
|
|
- { label: '车牌地', model: 'license' },
|
|
|
- { label: '外观颜色', model: 'out_color' },
|
|
|
- { label: '内饰颜色', model: 'in_color' },
|
|
|
- { label: '车辆使用性质', model: 'use_type', type: 'select' },
|
|
|
- { label: '新车价格', model: 'price' },
|
|
|
- { label: '车龄', model: 'age' },
|
|
|
- { label: '里程', model: 'mileage' },
|
|
|
- { label: '变速箱', model: 'type', type: 'select' },
|
|
|
- { label: '车身结构', model: 'structure', type: 'select' },
|
|
|
- { label: '排放标准', model: 'emission', type: 'select' },
|
|
|
- { label: '能源类型', model: 'energy', type: 'select' },
|
|
|
- { label: '排量', model: 'displacement' },
|
|
|
- { label: '座椅', model: 'set', type: 'select' },
|
|
|
- { label: '车辆级别', model: 'level', type: 'select' },
|
|
|
- { label: '驱动方式', model: 'drive', type: 'select' },
|
|
|
- { label: '油耗', model: 'oil' },
|
|
|
- { label: '年均保险费', model: 'premium' },
|
|
|
- { label: '年均保养费', model: 'maintenance' },
|
|
|
- { label: '百公里加速', model: 'hundred_time' },
|
|
|
- { label: '轴距', model: 'wheelbase' },
|
|
|
- { label: '总价', model: 'total_money' },
|
|
|
- { label: '付款方式', model: 'pay_type' },
|
|
|
- { label: '首付', model: 'first_pay' },
|
|
|
- { label: '实付价格', model: 'real_pay' },
|
|
|
- { label: '图片', model: 'file', custom: true }
|
|
|
-];
|
|
|
-const formFieldsForUpdate = [
|
|
|
- { label: '店铺', model: 'shop', type: 'select' },
|
|
|
- { label: '品牌', model: 'brand', custom: true },
|
|
|
- { label: '年份', model: 'year', type: 'year' },
|
|
|
- { label: '车型', model: 'series' },
|
|
|
- { label: '车款', model: 'style' },
|
|
|
- { label: '过户次数', model: 'number' },
|
|
|
- { label: '车辆识别VIN', model: 'vin' },
|
|
|
- { label: '首次上牌时间', model: 'f_time', type: 'date' },
|
|
|
- { label: '车源地', model: 'place' },
|
|
|
- { label: '车牌地', model: 'license' },
|
|
|
- { label: '外观颜色', model: 'out_color' },
|
|
|
- { label: '内饰颜色', model: 'in_color' },
|
|
|
- { label: '车辆使用性质', model: 'use_type', type: 'select' },
|
|
|
- { label: '价格', model: 'price' },
|
|
|
- { label: '车龄', model: 'age' },
|
|
|
- { label: '里程', model: 'mileage' },
|
|
|
- { label: '变速箱', model: 'type', type: 'select' },
|
|
|
- { label: '车身结构', model: 'structure', type: 'select' },
|
|
|
- { label: '排放标准', model: 'emission', type: 'select' },
|
|
|
- { label: '能源类型', model: 'energy', type: 'select' },
|
|
|
- { label: '排量', model: 'displacement' },
|
|
|
- { label: '座椅', model: 'set', type: 'select' },
|
|
|
- { label: '车辆级别', model: 'level', type: 'select' },
|
|
|
- { label: '驱动方式', model: 'drive', type: 'select' },
|
|
|
- { label: '油耗', model: 'oil' },
|
|
|
- { label: '年均保险费', model: 'premium' },
|
|
|
- { label: '年均保养费', model: 'maintenance' },
|
|
|
- { label: '百公里加速', model: 'hundred_time' },
|
|
|
- { label: '轴距', model: 'wheelbase' },
|
|
|
- { label: '总价', model: 'total_money' },
|
|
|
- { label: '付款方式', model: 'pay_type' },
|
|
|
- { label: '首付', model: 'first_pay' },
|
|
|
- { label: '实付价格', model: 'real_pay' },
|
|
|
- { label: '图片', model: 'file', custom: true }
|
|
|
-];
|
|
|
-// 关闭弹框
|
|
|
-const toClose = () => {
|
|
|
- form.value = {};
|
|
|
- dialog.value.show = false;
|
|
|
-};
|
|
|
-const onUpload = (e: { model: string; value: Array<[]> }) => {
|
|
|
- console.log(e);
|
|
|
- const { model, value } = e;
|
|
|
- form.value[model] = value;
|
|
|
-};
|
|
|
-// #endregion
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped></style>
|