增加车型产品
This commit is contained in:
lcc
@@ -0,0 +1,62 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 分页查询专题
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export async function pageProduct(params) {
|
||||
const res = await request.get('/car/product/page', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param data
|
||||
*/
|
||||
export async function addProduct(data) {
|
||||
const res = await request.post('/car/product', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param data
|
||||
*/
|
||||
export async function updateProduct(data) {
|
||||
const res = await request.put('/car/product', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
export async function updateProductStatus(id, status) {
|
||||
const res = await request.put('/car/product/status', {
|
||||
id,
|
||||
status
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
* @param ids id集合
|
||||
*/
|
||||
export async function removeProduct(ids) {
|
||||
const res = await request.delete('/car/product/delete', {
|
||||
data: { ids }
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import request from '@/utils/request';
|
||||
const BASE_URL = process.env.BASE_URL;
|
||||
import { API_BASE_URL } from '@/config/setting';
|
||||
const BASE_URL = API_BASE_URL;
|
||||
let reqPromise;
|
||||
|
||||
/**
|
||||
@@ -9,7 +10,7 @@ export function getRegionsData() {
|
||||
if (!reqPromise) {
|
||||
reqPromise = new Promise((resolve, reject) => {
|
||||
request
|
||||
.get(BASE_URL + 'json/regions-data.json', {
|
||||
.get(BASE_URL + '/common/regionsData', {
|
||||
baseURL: ''
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<!-- 上传图片组件 -->
|
||||
<template>
|
||||
<ele-image-upload
|
||||
v-model="imgs"
|
||||
:limit="limit"
|
||||
:drag="true"
|
||||
:multiple="multiple"
|
||||
:upload-handler="onHandler"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleImageUpload from 'ele-admin/es/ele-image-upload';
|
||||
import request from '@/utils/request';
|
||||
export default {
|
||||
components: {
|
||||
EleImageUpload
|
||||
},
|
||||
name: 'UploadImg',
|
||||
props: {
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
images: {
|
||||
default: null,
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgs: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.images && this.images.length > 0) {
|
||||
this.imgs = this.images;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitInput() {
|
||||
this.$emit('input', this.imgs);
|
||||
},
|
||||
onHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.imgs.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
/* 上传 item */
|
||||
onUpload(item) {
|
||||
let that = this;
|
||||
item.status = 'uploading';
|
||||
const formData = new FormData();
|
||||
formData.append('file', item.file);
|
||||
request({
|
||||
url: '/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
onUploadProgress: (e) => {
|
||||
if (e.lengthComputable) {
|
||||
item.progress = (e.loaded / e.total) * 100;
|
||||
}
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
item.status = 'done';
|
||||
item.url = res.data.data.full_url;
|
||||
item.fileUrl = res.data.data.url;
|
||||
that.emitInput();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
item.status = 'exception';
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
imgs: function () {
|
||||
this.emitInput();
|
||||
},
|
||||
images: function () {
|
||||
this.imgs = this.images;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -10,13 +10,17 @@
|
||||
<i v-else class="el-icon-_screen-full"></i>
|
||||
</div>
|
||||
<!-- 语言切换 -->
|
||||
<!--
|
||||
<div class="ele-admin-header-tool-item">
|
||||
<i18n-icon />
|
||||
</div>
|
||||
-->
|
||||
<!-- 消息通知 -->
|
||||
<!--
|
||||
<div class="ele-admin-header-tool-item">
|
||||
<header-notice />
|
||||
</div>
|
||||
-->
|
||||
<!-- 用户信息 -->
|
||||
<div class="ele-admin-header-tool-item">
|
||||
<el-dropdown @command="onUserDropClick">
|
||||
@@ -59,12 +63,12 @@
|
||||
// import HeaderNotice from './header-notice.vue';
|
||||
import PasswordModal from './password-modal.vue';
|
||||
import SettingDrawer from './setting-drawer.vue';
|
||||
import I18nIcon from './i18n-icon.vue';
|
||||
// import I18nIcon from './i18n-icon.vue';
|
||||
import { logout } from '@/utils/page-tab-util';
|
||||
|
||||
export default {
|
||||
// components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
|
||||
components: { PasswordModal, SettingDrawer, I18nIcon },
|
||||
components: { PasswordModal, SettingDrawer },
|
||||
props: {
|
||||
// 是否是全屏
|
||||
fullscreen: Boolean
|
||||
|
||||
@@ -0,0 +1,248 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="800px"
|
||||
:visible="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="true"
|
||||
custom-class="ele-dialog-form"
|
||||
:title="isUpdate ? '修改产品' : '添加产品'"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="产品标题:" prop="title">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
v-model="form.title"
|
||||
placeholder="请输入产品标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="推广图片:" prop="imgs">
|
||||
<upload-img
|
||||
v-model="form.imgs"
|
||||
:images="form.imgs"
|
||||
:limit="10"
|
||||
:multiple="true"
|
||||
/>
|
||||
<!--
|
||||
<div class="ele-text-secondary">
|
||||
尺寸宽度750
|
||||
</div>
|
||||
-->
|
||||
</el-form-item>
|
||||
<el-form-item label="推广范围:" prop="">
|
||||
<regions-select
|
||||
v-model="form.provinceCity"
|
||||
placeholder="全国"
|
||||
type="provinceCity"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期:" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="form.dateRange"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
range-separator="~"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="一级线索佣金:">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
placeholder=""
|
||||
v-model="form.firstLevelClues"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="一级成交佣金:">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
placeholder=""
|
||||
v-model="form.firstLevelDeal"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级线索佣金:">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
placeholder=""
|
||||
v-model="form.secondLevelClues"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级成交佣金:">
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="60"
|
||||
placeholder=""
|
||||
v-model="form.secondLevelDeal"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="人群画像:">
|
||||
<el-checkbox-group v-model="form.crowdProfiling">
|
||||
<el-checkbox
|
||||
v-for="value in crowdProfiling"
|
||||
:label="value.dictDataId"
|
||||
:key="value.dictDataId"
|
||||
>{{ value.dictDataName }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button @click="updateVisible(false)">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="save">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addProduct, updateProduct } from '@/api/car/product';
|
||||
import { listDictionaryData } from '@/api/system/dictionary-data';
|
||||
import UploadImg from '@/components/UploadImg/index.vue';
|
||||
import RegionsSelect from '@/components/RegionsSelect/index.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UploadImg,
|
||||
RegionsSelect
|
||||
},
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 全部机构
|
||||
organizationList: Array,
|
||||
// 修改回显的数据
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
title: '',
|
||||
dateRange: '',
|
||||
imgs: [],
|
||||
provinceCity: [],
|
||||
firstLevelClues: '',
|
||||
secondLevelClues: '',
|
||||
firstLevelDeal: '',
|
||||
secondLevelDeal: '',
|
||||
crowdProfiling: []
|
||||
};
|
||||
return {
|
||||
editVersion: false,
|
||||
defaultForm,
|
||||
// 表单数据
|
||||
form: { ...defaultForm },
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入活动标题',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
imgs: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传推广图',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dateRange: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择有效时间',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false,
|
||||
crowdProfiling: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否开启响应式布局
|
||||
styleResponsive() {
|
||||
return this.$store.state.theme.styleResponsive;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('333');
|
||||
listDictionaryData({ dictCode: 'crowdProfiling' }).then((data) => {
|
||||
this.crowdProfiling = data;
|
||||
console.log(this.crowdProfiling);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/* 添加海报描述 */
|
||||
addShareTitle() {
|
||||
this.form.shareTitle.push('');
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.form
|
||||
};
|
||||
const saveOrUpdate = this.isUpdate ? updateProduct : addProduct;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
this.loading = false;
|
||||
this.$message.success(msg);
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(visible) {
|
||||
this.editVersion = false;
|
||||
if (visible) {
|
||||
this.editVersion = true;
|
||||
if (this.data) {
|
||||
this.$util.assignObject(this.form, {
|
||||
...this.data
|
||||
});
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.form.imgs = [];
|
||||
this.isUpdate = false;
|
||||
}
|
||||
} else {
|
||||
this.$refs.form.clearValidate();
|
||||
this.form = { ...this.defaultForm };
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ele-image-upload-list .ele-image-upload-item {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<el-card shadow="never">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form label-width="77px" class="ele-form-search">
|
||||
<el-row :gutter="15">
|
||||
<el-col :md="6" :sm="12">
|
||||
<el-form-item label="名称:">
|
||||
<el-input
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
v-model="where.title"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12">
|
||||
<div class="ele-form-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
class="ele-btn-icon"
|
||||
@click="reload"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 数据表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:selection.sync="selection"
|
||||
cache-key="syliveActivityTable"
|
||||
>
|
||||
<!-- 表头工具栏 -->
|
||||
<template v-slot:toolbar>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
class="ele-btn-icon"
|
||||
@click="edit()"
|
||||
>
|
||||
新建
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 状态列 -->
|
||||
<template v-slot:status="{ row }">
|
||||
<el-switch
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
v-model="row.status"
|
||||
@change="editStatus(row)"
|
||||
/>
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-slot:action="{ row }">
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
@click="edit(row)"
|
||||
icon="el-icon-edit"
|
||||
>
|
||||
修改
|
||||
</el-link>
|
||||
<el-popconfirm
|
||||
class="ele-action"
|
||||
title="确定要删除此数据吗？"
|
||||
@confirm="remove(row)"
|
||||
>
|
||||
<template v-slot:reference>
|
||||
<el-link type="danger" :underline="false" icon="el-icon-delete">
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</el-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<edit
|
||||
:data="current"
|
||||
:visible.sync="showEdit"
|
||||
:organization-list="organizationList"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
pageProduct,
|
||||
removeProduct,
|
||||
updateProductStatus
|
||||
} from '@/api/car/product';
|
||||
import edit from './components/edit.vue';
|
||||
|
||||
export default {
|
||||
name: 'carProduct',
|
||||
components: { edit },
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
title: ''
|
||||
},
|
||||
// 门店数据
|
||||
organizationList: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
columnKey: 'selection',
|
||||
type: 'selection',
|
||||
width: 45,
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'id',
|
||||
label: 'ID',
|
||||
minWidth: 40,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'title',
|
||||
label: '产品信息',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
prop: 'cityName',
|
||||
label: '推广范围',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'timeLaunch',
|
||||
label: '上架时间',
|
||||
sortable: 'custom',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '上架状态',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
resizable: false,
|
||||
slot: 'status',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
columnKey: 'action',
|
||||
label: '操作',
|
||||
width: 380,
|
||||
align: 'center',
|
||||
resizable: false,
|
||||
slot: 'action'
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 是否显示编辑商品弹窗
|
||||
showEditItem: false,
|
||||
// 是否显示编辑券弹窗
|
||||
showEditCoupon: false,
|
||||
// 是否显示编辑券弹窗
|
||||
showEditDraw: false,
|
||||
showEditVisitTag: false,
|
||||
// 是否显示二维码弹窗
|
||||
showCode: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
//this.organizationQuery();
|
||||
},
|
||||
methods: {
|
||||
edit(row) {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, where, order }) {
|
||||
return pageProduct({ ...where, ...order, page, limit });
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({ page: 1, where: this.where });
|
||||
},
|
||||
/* 删除 */
|
||||
remove(row) {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeProduct(row.id)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要删除选中数据吗?', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeProduct(this.selection.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/* 更改状态 */
|
||||
editStatus(row) {
|
||||
const loading = this.$loading({ lock: true });
|
||||
updateProductStatus(row.id, row.status)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user