mkm/shop-mer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新了商户批发价功能

Browse Source
This commit is contained in:
weipengfei 2023-11-15 12:00:23 +08:00
parent 2662e98a96
commit 182f8f8507
5 changed files with 373 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
src/components/uploadPicture/index.vue
View File

@ -1,34 +1,76 @@
<template> <template>
<div> <div>
<el-row > <el-row>
<el-col v-bind="grid"> <el-col v-bind="grid">
<div class="Nav"> <div class="Nav">
<div class="input"> <div class="input">
<el-input v-model="filterText" placeholder="选择分类" prefix-icon="el-icon-search" style="width: 100%;" clearable /> <el-input
v-model="filterText"
placeholder="选择分类"
prefix-icon="el-icon-search"
style="width: 100%"
clearable
/>
</div> </div>
<div class="trees-coadd"> <div class="trees-coadd">
<div class="scollhide"> <div class="scollhide">
<div class="trees"> <div class="trees">
<el-tree ref="tree" :data="treeData2" :filter-node-method="filterNode" :props="defaultProps"> <el-tree
<div slot-scope="{ node, data}" class="custom-tree-node" @click.stop="handleNodeClick(data)"> ref="tree"
:data="treeData2"
:filter-node-method="filterNode"
:props="defaultProps"
>
<div
slot-scope="{ node, data }"
class="custom-tree-node"
@click.stop="handleNodeClick(data)"
>
<div> <div>
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
<span v-if="data.space_property_name" style="font-size: 11px;color: #3889b1">（{{ data.attachment_category_name }}）</span> <span
v-if="data.space_property_name"
style="font-size: 11px; color: #3889b1"
>（{{ data.attachment_category_name }}）</span
>
</div> </div>
<span class="el-ic"> <span class="el-ic">
<i class="el-icon-circle-plus-outline" @click.stop="onAdd(data.attachment_category_id)" /> <i
class="el-icon-circle-plus-outline"
@click.stop="onAdd(data.attachment_category_id)"
/>
<!-- <svg-icon--> <!-- <svg-icon-->
<!-- icon-class="danyuan"--> <!-- icon-class="danyuan"-->
<!-- title="添加管理单元"--> <!-- title="添加管理单元"-->
<!-- class="icon-space"--> <!-- class="icon-space"-->
<!-- />--> <!-- />-->
<i v-if="data.space_id!='0' && (!data.children || data.children == 'undefined') && data.attachment_category_id" class="el-icon-edit" title="修改" @click.stop="onEdit(data.attachment_category_id)" /> <i
v-if="
data.space_id != '0' &&
(!data.children || data.children == 'undefined') &&
data.attachment_category_id
"
class="el-icon-edit"
title="修改"
@click.stop="onEdit(data.attachment_category_id)"
/>
<!-- <svg-icon--> <!-- <svg-icon-->
<!-- icon-class="detail"--> <!-- icon-class="detail"-->
<!-- title="查看该空间详情"--> <!-- title="查看该空间详情"-->
<!-- class="icon-space"--> <!-- class="icon-space"-->
<!-- />--> <!-- />-->
<i v-if="data.space_id!='0' && (!data.children || data.children == 'undefined') && data.attachment_category_id" class="el-icon-delete" title="删除分类" @click.stop="() => handleDelete(data.attachment_category_id)" /> <i
v-if="
data.space_id != '0' &&
(!data.children || data.children == 'undefined') &&
data.attachment_category_id
"
class="el-icon-delete"
title="删除分类"
@click.stop="
() => handleDelete(data.attachment_category_id)
"
/>
</span> </span>
</div> </div>
</el-tree> </el-tree>
@ -40,15 +82,49 @@
<el-col v-bind="grid2" class="colLeft"> <el-col v-bind="grid2" class="colLeft">
<div v-loading="loading" class="conter"> <div v-loading="loading" class="conter">
<div class="bnt"> <div class="bnt">
<el-button v-if="params !== '/merchant/config/picture'" size="small" type="primary" class="mb10 mr10" @click="checkPics">使用选中图片</el-button> <el-button
<el-upload class="upload-demo mr10 mb15" :action="fileUrl" :on-success="handleSuccess" :headers="myHeaders" :show-file-list="false" multiple> v-if="params !== '/merchant/config/picture'"
size="small"
type="primary"
class="mb10 mr10"
@click="checkPics"
>使用选中图片</el-button
>
<el-upload
class="upload-demo mr10 mb15"
:action="fileUrl"
:on-success="handleSuccess"
:headers="myHeaders"
:show-file-list="false"
multiple
>
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
</el-upload> </el-upload>
<el-button type="success" size="small" @click.stop="onAdd(0)">添加分类</el-button> <el-button type="success" size="small" @click.stop="onAdd(0)"
<el-button type="error" size="small" class="mr10" :disabled="checkPicList.length===0" @click.stop="editPicList('图片')">删除图片</el-button> >添加分类</el-button
<el-input v-model="tableData.attachment_name" placeholder="请输入图片名称搜索" style="width: 230px;" @keyup.enter.native="getFileList(1)" size="small"> >
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getFileList(1)" /> <el-button
type="error"
size="small"
class="mr10"
:disabled="checkPicList.length === 0"
@click.stop="editPicList('图片')"
>删除图片</el-button
>
<el-input
v-model="tableData.attachment_name"
placeholder="请输入图片名称搜索"
style="width: 230px"
@keyup.enter.native="getFileList(1)"
size="small"
>
<el-button
slot="append"
icon="el-icon-search"
class="el-button-solt"
@click="getFileList(1)"
/>
</el-input> </el-input>
<!--<el-select <!--<el-select
v-model="tableData.order" v-model="tableData.order"
@ -66,35 +142,90 @@
value="1" value="1"
/> />
</el-select>--> </el-select>-->
<el-select v-model="sleOptions.attachment_category_name" placeholder="图片移动至" class="mb15" size="small"> <el-select
<el-option :label="sleOptions.attachment_category_name" :value="sleOptions.attachment_category_id" style="max-width: 560px;height:200px;overflow: auto;background-color:#fff"> v-model="sleOptions.attachment_category_name"
<el-tree ref="tree2" :data="treeData2" :filter-node-method="filterNode" :props="defaultProps" @node-click="handleSelClick" /> placeholder="图片移动至"
class="mb15"
size="small"
>
<el-option
:label="sleOptions.attachment_category_name"
:value="sleOptions.attachment_category_id"
style="
max-width: 560px;
height: 200px;
overflow: auto;
background-color: #fff;
"
>
<el-tree
ref="tree2"
:data="treeData2"
:filter-node-method="filterNode"
:props="defaultProps"
@node-click="handleSelClick"
/>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="pictrueList acea-row mb15"> <div class="pictrueList acea-row mb15">
<div v-show="isShowPic" class="imagesNo"> <div v-show="isShowPic" class="imagesNo">
<i class="el-icon-picture" style="font-size: 60px;color: rgb(219, 219, 219);" /> <i
class="el-icon-picture"
style="font-size: 60px; color: rgb(219, 219, 219)"
/>
<span class="imagesNo_sp">图片库为空</span> <span class="imagesNo_sp">图片库为空</span>
</div> </div>
<div class="conters"> <div class="conters">
<div v-for="(item, index) in pictrueList.list" :key="index" class="gridPic"> <div
<p class="number" v-if="item.num>0"> v-for="(item, index) in pictrueList.list"
:key="index"
class="gridPic"
>
<p class="number" v-if="item.num > 0">
<el-badge class="item" :value="item.num"> <el-badge class="item" :value="item.num">
<a href="#" class="demo-badge"></a> <a href="#" class="demo-badge"></a>
</el-badge> </el-badge>
</p> </p>
<img v-lazy="item.attachment_src" :class="item.isSelect ? 'on': '' " @click="changImage(item, index, pictrueList.list)" /> <img
<div style="display: flex;align-items: center;justify-content: space-between"> v-lazy="item.attachment_src"
<el-input v-model="item.attachment_name" v-if="editId === item.attachment_id"></el-input> :class="item.isSelect ? 'on' : ''"
<p class="name" style="width: 80%" v-else>{{item.attachment_name}}</p> @click="changImage(item, index, pictrueList.list)"
<i class="el-icon-edit" @click="handleEdit(item.attachment_id,item.attachment_name)" /> />
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<el-input
v-model="item.attachment_name"
v-if="editId === item.attachment_id"
></el-input>
<p class="name" style="width: 80%" v-else>
{{ item.attachment_name }}
</p>
<i
class="el-icon-edit"
@click="
handleEdit(item.attachment_id, item.attachment_name)
"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<el-pagination :page-sizes="[12, 20, 40, 60]" :page-size="tableData.limit" :current-page="tableData.page" layout="total, sizes, prev, pager, next, jumper" :total="pictrueList.total" @size-change="handleSizeChange" @current-change="pageChange" /> <el-pagination
:page-sizes="[12, 20, 40, 60]"
:page-size="tableData.limit"
:current-page="tableData.page"
layout="total, sizes, prev, pager, next, jumper"
:total="pictrueList.total"
@size-change="handleSizeChange"
@current-change="pageChange"
/>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -136,7 +267,7 @@ export default {
type: String type: String
} }
}, },
data() { data () {
return { return {
loading: false, loading: false,
params: "", params: "",
@ -190,7 +321,7 @@ export default {
}; };
}, },
computed: { computed: {
fileUrl() { fileUrl () {
return ( return (
SettingMer.https + SettingMer.https +
`/upload/image/${this.tableData.attachment_category_id}/file` `/upload/image/${this.tableData.attachment_category_id}/file`
@ -198,25 +329,25 @@ export default {
} }
}, },
watch: { watch: {
filterText(val) { filterText (val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
} }
}, },
mounted() { mounted () {
this.params = this.$route && this.$route.path ? this.$route.path : ""; this.params = this.$route && this.$route.path ? this.$route.path : "";
if(this.$route && this.$route.query.field === "dialog") if (this.$route && this.$route.query.field === "dialog")
import("../../../public/UEditor/dialogs/internal"); import("../../../public/UEditor/dialogs/internal");
this.getList(); this.getList();
this.getFileList(""); this.getFileList("");
}, },
methods: { methods: {
// 搜索分类 // 搜索分类
filterNode(value, data) { filterNode (value, data) {
if(!value) return true; if (!value) return true;
return data.attachment_category_name.indexOf(value) !== -1; return data.attachment_category_name.indexOf(value) !== -1;
}, },
// 所有分类 // 所有分类
getList() { getList () {
const data = { const data = {
attachment_category_name: "全部图片", attachment_category_name: "全部图片",
attachment_category_id: 0 attachment_category_id: 0
@ -232,10 +363,10 @@ export default {
}); });
}, },
// 编辑图片名称 // 编辑图片名称
handleEdit(id, name) { handleEdit (id, name) {
if(id === this.editId) { if (id === this.editId) {
if(this.editName !== name) { if (this.editName !== name) {
if(!name.trim()) { if (!name.trim()) {
this.$message.warning("请先输入图片名称"); this.$message.warning("请先输入图片名称");
return; return;
} }
@ -253,20 +384,20 @@ export default {
} }
}, },
// 添加分类 // 添加分类
onAdd(id) { onAdd (id) {
const config = {}; const config = {};
if(Number(id) > 0) config.formData = { pid: id }; if (Number(id) > 0) config.formData = { pid: id };
this.$modalForm(attachmentCreateApi(), config).then(({ message }) => { this.$modalForm(attachmentCreateApi(), config).then(({ message }) => {
// this.$message.success(message) // this.$message.success(message)
this.getList(); this.getList();
}); });
}, },
// 编辑 // 编辑
onEdit(id) { onEdit (id) {
this.$modalForm(attachmentUpdateApi(id)).then(() => this.getList()); this.$modalForm(attachmentUpdateApi(id)).then(() => this.getList());
}, },
// 删除 // 删除
handleDelete(id) { handleDelete (id) {
this.$modalSure().then(() => { this.$modalSure().then(() => {
attachmentDeleteApi(id) attachmentDeleteApi(id)
.then(({ message }) => { .then(({ message }) => {
@ -278,15 +409,15 @@ export default {
}); });
}); });
}, },
handleNodeClick(data) { handleNodeClick (data) {
this.tableData.attachment_category_id = data.attachment_category_id; this.tableData.attachment_category_id = data.attachment_category_id;
this.selectItem = []; this.selectItem = [];
this.checkPicList = []; this.checkPicList = [];
this.getFileList(""); this.getFileList("");
}, },
// 上传成功 // 上传成功
handleSuccess(response) { handleSuccess (response) {
if(response.status === 200) { if (response.status === 200) {
this.$message.success("上传成功"); this.$message.success("上传成功");
this.getFileList(""); this.getFileList("");
} else { } else {
@ -294,19 +425,19 @@ export default {
} }
}, },
// 文件列表 // 文件列表
getFileList(num) { getFileList (num) {
this.loading = true; this.loading = true;
this.tableData.page = num ? num : this.tableData.page; this.tableData.page = num ? num : this.tableData.page;
attachmentListApi(this.tableData) attachmentListApi(this.tableData)
.then(async res => { .then(async res => {
this.pictrueList.list = res.data.list; this.pictrueList.list = res.data.list;
console.log(this.pictrueList.list); console.log(this.pictrueList.list);
if(this.pictrueList.list.length) { if (this.pictrueList.list.length) {
this.isShowPic = false; this.isShowPic = false;
} else { } else {
this.isShowPic = true; this.isShowPic = true;
} }
if( if (
this.$route && this.$route &&
this.$route.query.field && this.$route.query.field &&
this.$route.query.field !== "dialog" this.$route.query.field !== "dialog"
@ -321,18 +452,18 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
pageChange(page) { pageChange (page) {
this.tableData.page = page; this.tableData.page = page;
this.selectItem = []; this.selectItem = [];
this.checkPicList = []; this.checkPicList = [];
this.getFileList(""); this.getFileList("");
}, },
handleSizeChange(val) { handleSizeChange (val) {
this.tableData.limit = val; this.tableData.limit = val;
this.getFileList(""); this.getFileList("");
}, },
// 选中图片 // 选中图片
changImage(item, index, row) { changImage (item, index, row) {
// this.$set(item, 'isSelect', item.isSelect === undefined ? true : !item.isSelect) // this.$set(item, 'isSelect', item.isSelect === undefined ? true : !item.isSelect)
// selectItem = this.pictrueList.list.filter((item) => { // selectItem = this.pictrueList.list.filter((item) => {
// return item.isSelect === true // return item.isSelect === true
@ -344,7 +475,7 @@ export default {
// pic.push(item.attachment_src) // pic.push(item.attachment_src)
// }) // })
// this.checkPicList = pic // this.checkPicList = pic
if(!item.isSelect) { if (!item.isSelect) {
item.isSelect = true; item.isSelect = true;
this.selectItem.push(item); this.selectItem.push(item);
this.checkPicList.push(item.attachment_src); this.checkPicList.push(item.attachment_src);
@ -353,28 +484,28 @@ export default {
// this.checkPicList.push(item.attachment_src) // this.checkPicList.push(item.attachment_src)
item.isSelect = false; item.isSelect = false;
var index = this.ids.indexOf(item.attachment_id); var index = this.ids.indexOf(item.attachment_id);
if(index > -1) this.ids.splice(index, 1); if (index > -1) this.ids.splice(index, 1);
// this.ids = [] // this.ids = []
this.selectItem.forEach((o, i) => { this.selectItem.forEach((o, i) => {
if(o.attachment_id == item.attachment_id) { if (o.attachment_id == item.attachment_id) {
this.selectItem.splice(i, 1); this.selectItem.splice(i, 1);
} }
}); });
this.checkPicList.map((el, index) => { this.checkPicList.map((el, index) => {
if(el == item.attachment_src) { if (el == item.attachment_src) {
this.checkPicList.splice(index, 1); this.checkPicList.splice(index, 1);
} }
}); });
} }
if( if (
!this.$route || !this.$route ||
this.$route.fullPath !== "/merchant/config/picture" || this.$route.fullPath !== "/merchant/config/picture" ||
this.$route.query.field === "dialog" this.$route.query.field === "dialog"
) { ) {
this.pictrueList.list.map((el, i) => { this.pictrueList.list.map((el, i) => {
if(el.isSelect) { if (el.isSelect) {
this.selectItem.filter((el2, j) => { this.selectItem.filter((el2, j) => {
if(el.attachment_id == el2.attachment_id) { if (el.attachment_id == el2.attachment_id) {
el.num = j + 1; el.num = j + 1;
} }
}); });
@ -386,12 +517,12 @@ export default {
console.log(this.pictrueList.list); console.log(this.pictrueList.list);
}, },
// 点击使用选中图片 // 点击使用选中图片
checkPics() { checkPics () {
if(this.checkPicList.length) { if (this.checkPicList.length) {
console.log(this.$route); // console.log(this.$route);
if(this.$route) { if (this.$route) {
if(this.$route.query.type === "1") { if (this.$route.query.type === "1") {
if(this.checkPicList.length > 1) if (this.checkPicList.length > 1)
return this.$message.warning("最多只能选一张图片"); return this.$message.warning("最多只能选一张图片");
/* eslint-disable */ /* eslint-disable */
form_create_helper.set( form_create_helper.set(
@ -400,7 +531,7 @@ export default {
); );
form_create_helper.close(this.$route.query.field); form_create_helper.close(this.$route.query.field);
} }
if(this.$route.query.type === "2") { if (this.$route.query.type === "2") {
this.checkedAll = [...this.checkedMore, ...this.checkPicList]; this.checkedAll = [...this.checkedMore, ...this.checkPicList];
form_create_helper.set( form_create_helper.set(
this.$route.query.field, this.$route.query.field,
@ -408,9 +539,9 @@ export default {
); );
form_create_helper.close(this.$route.query.field); form_create_helper.close(this.$route.query.field);
} }
if(this.$route.query.field === "dialog") { if (this.$route.query.field === "dialog") {
let str = ""; let str = "";
for(let i = 0; i < this.checkPicList.length; i++) { for (let i = 0; i < this.checkPicList.length; i++) {
str += '<img src="' + this.checkPicList[i] + '">'; str += '<img src="' + this.checkPicList[i] + '">';
} }
/* eslint-disable */ /* eslint-disable */
@ -419,7 +550,7 @@ export default {
} }
} else { } else {
console.log(this.isMore, this.checkPicList.length); console.log(this.isMore, this.checkPicList.length);
if(this.isMore === "1" && this.checkPicList.length > 1) { if (this.isMore === "1" && this.checkPicList.length > 1) {
return this.$message.warning("最多只能选一张图片"); return this.$message.warning("最多只能选一张图片");
} }
console.log(this.checkPicList); console.log(this.checkPicList);
@ -430,7 +561,7 @@ export default {
} }
}, },
// 删除图片 // 删除图片
editPicList(tit) { editPicList (tit) {
const ids = { const ids = {
ids: this.ids ids: this.ids
}; };
@ -447,8 +578,8 @@ export default {
}); });
}, },
// 移动分类点击 // 移动分类点击
handleSelClick(node) { handleSelClick (node) {
if(this.ids.length) { if (this.ids.length) {
this.sleOptions = { this.sleOptions = {
attachment_category_name: node.attachment_category_name, attachment_category_name: node.attachment_category_name,
attachment_category_id: node.attachment_category_id attachment_category_id: node.attachment_category_id
@ -458,7 +589,7 @@ export default {
this.$message.warning("请先选择图片"); this.$message.warning("请先选择图片");
} }
}, },
getMove() { getMove () {
categoryApi(this.ids, this.sleOptions.attachment_category_id) categoryApi(this.ids, this.sleOptions.attachment_category_id)
.then(async res => { .then(async res => {
this.$message.success(res.message); this.$message.success(res.message);
@ -470,7 +601,7 @@ export default {
this.$message.error(res.message); this.$message.error(res.message);
}); });
}, },
clearBoth() { clearBoth () {
this.sleOptions = { this.sleOptions = {
attachment_category_name: "", attachment_category_name: "",
attachment_category_id: "" attachment_category_id: ""
@ -558,8 +689,8 @@ export default {
.el-tree-node__content:hover { .el-tree-node__content:hover {
font-weight: bold; font-weight: bold;
} }
/deep/ .el-tree-node:focus > .el-tree-node__content { /deep/ .el-tree-node:focus > .el-tree-node__content {
background-color: #F5F7FA!important; background-color: #f5f7fa !important;
} }
.el-tree--highlight-current .el-tree--highlight-current
.el-tree-node.is-current .el-tree-node.is-current

61
src/layout/components/Navbar.vue
View File

@ -10,39 +10,42 @@
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device !== 'mobile'">
<header-notice/> <header-notice />
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
</template> </template>
<div class="platformLabel">{{ label.mer_name }}</div> <div class="platformLabel">{{ label.mer_name }}</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" :hide-on-click="false"> <el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
:hide-on-click="false"
>
<span class="el-dropdown-link fontSize"> <span class="el-dropdown-link fontSize">
{{ adminInfo }} {{ adminInfo }}
<i class="el-icon-arrow-down el-icon--right" /> <i class="el-icon-arrow-down el-icon--right" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="goUser"> <el-dropdown-item @click.native="goUser">
<span style="display:block;">个人中心</span> <span style="display: block">个人中心</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided @click.native="goPassword"> <el-dropdown-item divided @click.native="goPassword">
<span style="display:block;">修改密码</span> <span style="display: block">修改密码</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided> <el-dropdown-item divided>
<el-dropdown placement="right-start" @command="handleCommand"> <el-dropdown placement="right-start" @command="handleCommand">
<span>菜单样式</span> <span>菜单样式</span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">标准</el-dropdown-item> <el-dropdown-item command="a">标准</el-dropdown-item>
<el-dropdown-item command="b">分栏</el-dropdown-item> <el-dropdown-item command="b">分栏</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出</span> <span style="display: block">退出</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
</template> </template>
@ -67,11 +70,11 @@ export default {
Search Search
}, },
watch: { watch: {
sidebarStyle(newValue) { sidebarStyle (newValue) {
this.sidebarStyle = newValue this.sidebarStyle = newValue
} }
}, },
data() { data () {
return { return {
roterPre: roterPre, roterPre: roterPre,
sideBar1: sideBar1:
@ -82,16 +85,17 @@ export default {
}, },
computed: { computed: {
...mapGetters(["sidebar", "avatar", "device"]), ...mapGetters(["sidebar", "avatar", "device"]),
...mapState({ ...mapState({
sidebar: state => state.app.sidebar, sidebar: state => state.app.sidebar,
sidebarStyle: state => state.user.sidebarStyle, sidebarStyle: state => state.user.sidebarStyle,
}), }),
}, },
mounted() { mounted () {
getBaseInfo() getBaseInfo()
.then(res => { .then(res => {
this.label = res.data this.label = res.data;
this.$store.commit('user/SET_MERCHANT_TYPE', res.data.merchantType || {})
}) })
.catch(({ message }) => { .catch(({ message }) => {
this.$message.error(message); this.$message.error(message);
@ -99,10 +103,10 @@ export default {
}, },
methods: { methods: {
//切换菜单样式 //切换菜单样式
handleCommand(command) { handleCommand (command) {
this.$store.commit('user/SET_SIDEBAR_STYLE', command); this.$store.commit('user/SET_SIDEBAR_STYLE', command);
window.localStorage.setItem('sidebarStyle', command); window.localStorage.setItem('sidebarStyle', command);
if (this.sideBar1) { if (this.sideBar1) {
if (this.subMenuList && this.subMenuList.length > 0) { if (this.subMenuList && this.subMenuList.length > 0) {
this.$store.commit("user/SET_SIDEBAR_WIDTH", 270); this.$store.commit("user/SET_SIDEBAR_WIDTH", 270);
} else { } else {
@ -113,16 +117,16 @@ export default {
} }
// location.reload(); // location.reload();
}, },
toggleSideBar() { toggleSideBar () {
this.$store.dispatch("app/toggleSideBar"); this.$store.dispatch("app/toggleSideBar");
}, },
goUser() { goUser () {
this.$modalForm(editFormApi()); this.$modalForm(editFormApi());
}, },
goPassword() { goPassword () {
this.$modalForm(passwordFormApi()); this.$modalForm(passwordFormApi());
}, },
async logout() { async logout () {
await this.$store.dispatch("user/logout"); await this.$store.dispatch("user/logout");
this.$router.push(`${roterPre}/login?redirect=${this.$route.fullPath}`); this.$router.push(`${roterPre}/login?redirect=${this.$route.fullPath}`);
} }
@ -217,7 +221,7 @@ export default {
} }
.platformLabel { .platformLabel {
display: inline-block; display: inline-block;
background: #F0AA0B; background: #f0aa0b;
color: #fff; color: #fff;
vertical-align: text-bottom; vertical-align: text-bottom;
font-size: 12px; font-size: 12px;
@ -227,7 +231,6 @@ export default {
border-radius: 10px; border-radius: 10px;
position: relative; position: relative;
top: -11px; top: -11px;
} }
} }
</style> </style>

193
src/layout/components/Sidebar/index.vue
View File

@ -25,7 +25,20 @@
</el-menu> </el-menu>
<template v-else> <template v-else>
<template v-if="!isCollapse"> <template v-if="!isCollapse">
<ul v-for="item in menuList" :key="item.route" style="padding: 0;"><li><div class="menu menu-one"><div class="menu-item" :class="{ active: pathCompute(item) }" @click="goPath(item)"><i :class="'menu-icon el-icon-' + item.icon"></i><span>{{ item.menu_name }}</span></div></div></li></ul> <ul v-for="item in menuList" :key="item.route" style="padding: 0">
<li>
<div class="menu menu-one">
<div
class="menu-item"
:class="{ active: pathCompute(item) }"
@click="goPath(item)"
>
<i :class="'menu-icon el-icon-' + item.icon"></i
><span>{{ item.menu_name }}</span>
</div>
</div>
</li>
</ul>
</template> </template>
<!--一级菜单点击后二级菜单展开样式--> <!--一级菜单点击后二级菜单展开样式-->
<el-menu <el-menu
@ -38,16 +51,16 @@
active-text-color="#303133" active-text-color="#303133"
mode="vertical" mode="vertical"
> >
<div style="height: 100%;"> <div style="height: 100%">
<div class="sub-title">{{ menu_name }}</div> <div class="sub-title">{{ menu_name }}</div>
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<div v-for="(itm, idx) in subMenuList" :key="idx"> <div v-for="(itm, idx) in subMenuList" :key="idx">
<template <template
v-if=" v-if="
hasOneShowingChild(itm.children, itm) && hasOneShowingChild(itm.children, itm) &&
(!onlyOneChild.children || (!onlyOneChild.children ||
onlyOneChild.noShowingChildren) && onlyOneChild.noShowingChildren) &&
!itm.alwaysShow !itm.alwaysShow
" "
> >
<app-link <app-link
@ -55,7 +68,10 @@
:to="resolvePath(onlyOneChild.route)" :to="resolvePath(onlyOneChild.route)"
> >
<el-menu-item :index="resolvePath(onlyOneChild.route)"> <el-menu-item :index="resolvePath(onlyOneChild.route)">
<item :icon="onlyOneChild.icon || (itm && itm.icon)":title="onlyOneChild.menu_name"/> <item
:icon="onlyOneChild.icon || (itm && itm.icon)"
:title="onlyOneChild.menu_name"
/>
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
@ -87,7 +103,7 @@
</div> </div>
</el-menu> </el-menu>
<template v-if="isCollapse"> <template v-if="isCollapse">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="variables.menuBg" :background-color="variables.menuBg"
@ -140,7 +156,7 @@ import variables from "@/styles/variables.scss";
export default { export default {
components: { SidebarItem, Logo, AppLink, Item }, components: { SidebarItem, Logo, AppLink, Item },
mixins: [FixiOSBug], mixins: [FixiOSBug],
data() { data () {
this.onlyOneChild = null; this.onlyOneChild = null;
return { return {
sideBar1: sideBar1:
@ -159,14 +175,14 @@ export default {
sidebarRouters: state => state.user.sidebarRouters, sidebarRouters: state => state.user.sidebarRouters,
sidebarStyle: state => state.user.sidebarStyle, sidebarStyle: state => state.user.sidebarStyle,
// 所有的路由信息 // 所有的路由信息
routers() { routers () {
let routers = this.$store.state.user.menuList let routers = this.$store.state.user.menuList
? this.$store.state.user.menuList ? this.$store.state.user.menuList
: []; : [];
return routers; return routers;
} }
}), }),
activeMenu() { activeMenu () {
const route = this.$route; const route = this.$route;
const { meta, path } = route; const { meta, path } = route;
// if set path, the sidebar will highlight the path you set // if set path, the sidebar will highlight the path you set
@ -175,49 +191,49 @@ export default {
} }
return path; return path;
}, },
showLogo() { showLogo () {
return this.$store.state.settings.sidebarLogo; return this.$store.state.settings.sidebarLogo;
}, },
variables() { variables () {
return variables; return variables;
}, },
isCollapse() { isCollapse () {
return !this.sidebar.opened; return !this.sidebar.opened;
} }
}, },
watch: { watch: {
sidebarStyle(newValue, oldValue) { sidebarStyle (newValue, oldValue) {
this.sideBar1 = newValue == "a" && oldValue != "a" ? false : true; this.sideBar1 = newValue == "a" && oldValue != "a" ? false : true;
this.setMenuWidth(); this.setMenuWidth();
}, },
sidebar: { sidebar: {
handler(newVal, oldVal) { handler (newVal, oldVal) {
if(this.sideBar1){ if (this.sideBar1) {
this.getSubMenu(); this.getSubMenu();
} }
}, },
deep: true // 对象内部属性的监听，关键。 deep: true // 对象内部属性的监听，关键。
}, },
$route:{ $route: {
handler(newVal, oldVal) { handler (newVal, oldVal) {
if(this.sideBar1){ if (this.sideBar1) {
this.getSubMenu(); this.getSubMenu();
} }
}, },
deep: true // 对象内部属性的监听，关键。 deep: true // 对象内部属性的监听，关键。
}, },
}, },
mounted() { mounted () {
this.getMenus(); this.getMenus();
if(this.sideBar1){ if (this.sideBar1) {
this.getSubMenu(); this.getSubMenu();
}else{ } else {
this.setMenuWidth(); this.setMenuWidth();
} }
}, },
methods: { methods: {
// 菜单选中后左侧宽度数值存储 // 菜单选中后左侧宽度数值存储
setMenuWidth() { setMenuWidth () {
if (this.sideBar1) { if (this.sideBar1) {
if (this.subMenuList && this.subMenuList.length > 0 && !this.isCollapse) { if (this.subMenuList && this.subMenuList.length > 0 && !this.isCollapse) {
this.$store.commit("user/SET_SIDEBAR_WIDTH", 270); this.$store.commit("user/SET_SIDEBAR_WIDTH", 270);
@ -228,15 +244,15 @@ export default {
this.$store.commit("user/SET_SIDEBAR_WIDTH", 180); this.$store.commit("user/SET_SIDEBAR_WIDTH", 180);
} }
}, },
ishttp(url) { ishttp (url) {
return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1; return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
}, },
getMenus() { getMenus () {
this.$store.dispatch("user/getMenus", { this.$store.dispatch("user/getMenus", {
that: this that: this
}); });
}, },
hasOneShowingChild(children = [], parent) { hasOneShowingChild (children = [], parent) {
const showingChildren = children.filter(item => { const showingChildren = children.filter(item => {
if (item.hidden) { if (item.hidden) {
return false; return false;
@ -257,7 +273,7 @@ export default {
} }
return false; return false;
}, },
resolvePath(routePath) { resolvePath (routePath) {
if (isExternal(routePath)) { if (isExternal(routePath)) {
return routePath; return routePath;
} }
@ -266,13 +282,13 @@ export default {
} }
return path.resolve(routePath, routePath); return path.resolve(routePath, routePath);
}, },
goPath(item) { goPath (item) {
this.menu_name = item.menu_name; this.menu_name = item.menu_name;
if (item.children) { if (item.children) {
this.$store.commit("user/SET_SIDEBAR_WIDTH", 270); this.$store.commit("user/SET_SIDEBAR_WIDTH", 270);
// console.log(this.pathCompute(item.children)+ 'sdxsds'); // console.log(this.pathCompute(item.children)+ 'sdxsds');
this.subMenuList = item.children; this.subMenuList = item.children;
window.localStorage.setItem("subMenuList",this.subMenuList); window.localStorage.setItem("subMenuList", this.subMenuList);
let goUrl = this.resolvePath(this.getChild(item.children)[0].route); let goUrl = this.resolvePath(this.getChild(item.children)[0].route);
item.route = goUrl; item.route = goUrl;
this.$router.push({ this.$router.push({
@ -281,14 +297,14 @@ export default {
} else { } else {
this.$store.commit("user/SET_SIDEBAR_WIDTH", 130); this.$store.commit("user/SET_SIDEBAR_WIDTH", 130);
this.subMenuList = []; this.subMenuList = [];
window.localStorage.setItem("subMenuList",[]); window.localStorage.setItem("subMenuList", []);
let goUrl = this.resolvePath(item.route); let goUrl = this.resolvePath(item.route);
this.$router.push({ this.$router.push({
path: goUrl path: goUrl
}); });
} }
}, },
getChild(data) { getChild (data) {
const result = []; const result = [];
data.forEach(item => { data.forEach(item => {
// 遍历树 // 遍历树
@ -308,36 +324,36 @@ export default {
return result; return result;
}, },
//判断当前页面父级菜单 //判断当前页面父级菜单
pathCompute(data) { pathCompute (data) {
console.log(this.$route) // console.log(this.$route)
const loop = child => { const loop = child => {
// 是否有子节点，有则继续遍历下一级，无则是叶子节点 // 是否有子节点，有则继续遍历下一级，无则是叶子节点
for (let i = 0; i < child.length; i++) { for (let i = 0; i < child.length; i++) {
if(this.$route.path == child[i]['route'] || this.$route.meta.activeMenu == child[i]['route']){ if (this.$route.path == child[i]['route'] || this.$route.meta.activeMenu == child[i]['route']) {
return true; return true;
} }
if(loop(child[i].children || [])){ if (loop(child[i].children || [])) {
return true; return true;
}; };
} }
return false; return false;
}; };
if(!loop(data.children || [])){ if (!loop(data.children || [])) {
return this.$route.path == data.route; return this.$route.path == data.route;
} }
return true; return true;
}, },
// 获取当前一级菜单的二级菜单 // 获取当前一级菜单的二级菜单
getSubMenu(){ getSubMenu () {
for (let i = 0; i < this.menuList.length; i++) { for (let i = 0; i < this.menuList.length; i++) {
if(this.pathCompute(this.menuList[i])){ if (this.pathCompute(this.menuList[i])) {
this.subMenuList = this.menuList[i].children; this.subMenuList = this.menuList[i].children;
this.menu_name = this.menuList[i].menu_name; this.menu_name = this.menuList[i].menu_name;
window.localStorage.setItem("subMenuList",this.menuList[i].children); window.localStorage.setItem("subMenuList", this.menuList[i].children);
this.setMenuWidth(); this.setMenuWidth();
return; return;
} }
} }
}, },
...mapMutations("user", ["SET_MENU_LIST"]) ...mapMutations("user", ["SET_MENU_LIST"])
} }
@ -366,7 +382,7 @@ export default {
color: #909399; color: #909399;
width: 24px; width: 24px;
} }
span{ span {
display: inline-block; display: inline-block;
color: #bfcbd9; color: #bfcbd9;
} }
@ -375,7 +391,6 @@ export default {
} }
&:hover { &:hover {
background: rgba(67, 127, 253, 0.2); background: rgba(67, 127, 253, 0.2);
} }
} }
.menu-two { .menu-two {
@ -405,8 +420,8 @@ export default {
top: 0; top: 0;
left: 130px; left: 130px;
box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.06); box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.06);
.subMenu2{ .subMenu2 {
background: #ffffff!important; background: #ffffff !important;
} }
.sub-title { .sub-title {
font-weight: 600; font-weight: 600;
@ -414,27 +429,30 @@ export default {
font-size: 18px; font-size: 18px;
padding: 20px; padding: 20px;
} }
/deep/.el-menu-item,/deep/.el-submenu__title { /deep/.el-menu-item,
/deep/.el-submenu__title {
height: 46px; height: 46px;
line-height: 46px; line-height: 46px;
// background: #ffffff !important; // background: #ffffff !important;
color: #303133 !important; color: #303133 !important;
font-size: 13px; font-size: 13px;
&:hover { &:hover {
background: #ECF2FE !important; background: #ecf2fe !important;
color: #303133 !important; color: #303133 !important;
.el-submenu__title{ .el-submenu__title {
background: #ECF2FE !important; background: #ecf2fe !important;
color: #303133 !important; color: #303133 !important;
} }
} }
} }
/deep/.subMenu2 .el-submenu__title{ /deep/.subMenu2 .el-submenu__title {
padding-left: 15px!important; padding-left: 15px !important;
} }
/deep/.router-link-active .el-menu-item, /deep/.el-menu-item.is-active,/deep/ .router-link-active .el-submenu__title{ /deep/.router-link-active .el-menu-item,
background: #ECF2FE !important; /deep/.el-menu-item.is-active,
/deep/ .router-link-active .el-submenu__title {
background: #ecf2fe !important;
} }
} }
/deep/.menus-new .el-icon-arrow-down { /deep/.menus-new .el-icon-arrow-down {
@ -444,43 +462,48 @@ export default {
min-width: 140px !important; min-width: 140px !important;
font-size: 13px; font-size: 13px;
} }
/deep/.menuOpen .el-menu-item,/deep/.menuOpen .el-menu-item,/deep/.menuOpen .el-submenu__title{ /deep/.menuOpen .el-menu-item,
padding-left: 15px!important; /deep/.menuOpen .el-menu-item,
/deep/.menuOpen .el-submenu__title {
padding-left: 15px !important;
} }
/deep/.menuOpen .subMenu2 .el-submenu__title{ /deep/.menuOpen .subMenu2 .el-submenu__title {
padding-left: 30px!important; padding-left: 30px !important;
} }
/deep/.style2 .is-active,/deep/.style2>.el-submenu:hover{ /deep/.style2 .is-active,
background: #182848!important; /deep/.style2 > .el-submenu:hover {
background: #182848 !important;
} }
/deep/.style2.menuTwo .el-submenu__title{ /deep/.style2.menuTwo .el-submenu__title {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/deep/.subMenu1 .menuTwo .el-submenu__title:hover,/deep/.subMenu1 .menuTwo .el-menu-item:hover{ /deep/.subMenu1 .menuTwo .el-submenu__title:hover,
background: #182848!important; /deep/.subMenu1 .menuTwo .el-menu-item:hover {
background: #182848 !important;
} }
.menu-link{ .menu-link {
display: flex!important; display: flex !important;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
/deep/.menuStyle2 .el-submenu>.el-submenu__title>span{ /deep/.menuStyle2 .el-submenu > .el-submenu__title > span {
display: inline-block!important; display: inline-block !important;
visibility: visible!important; visibility: visible !important;
width: auto!important; width: auto !important;
height: auto!important; height: auto !important;
} }
/deep/.menuStyle2 .el-submenu{ /deep/.menuStyle2 .el-submenu {
padding: 0 20px; padding: 0 20px;
} }
/deep/.menuStyle2 .el-submenu .el-submenu__title{ /deep/.menuStyle2 .el-submenu .el-submenu__title {
background: transparent!important; background: transparent !important;
} }
/deep/.subMenu1 .menuTwo .el-menu{ /deep/.subMenu1 .menuTwo .el-menu {
background: #030C17!important; background: #030c17 !important;
} }
/deep/.subMenu1 .menuTwo .nest-menu .el-submenu>.el-submenu__title,/deep/.subMenu1 .menuTwo .el-submenu .el-menu-item{ /deep/.subMenu1 .menuTwo .nest-menu .el-submenu > .el-submenu__title,
background: #030c17!important; /deep/.subMenu1 .menuTwo .el-submenu .el-menu-item {
background: #030c17 !important;
} }
</style> </style>

21
src/store/modules/user.js
View File

@ -19,7 +19,8 @@ const state = {
roles: [], roles: [],
menuList: JSON.parse(localStorage.getItem('MenuList')), menuList: JSON.parse(localStorage.getItem('MenuList')),
sidebarWidth: window.localStorage.getItem('sidebarWidth'), sidebarWidth: window.localStorage.getItem('sidebarWidth'),
sidebarStyle: window.localStorage.getItem('sidebarStyle') sidebarStyle: window.localStorage.getItem('sidebarStyle'),
merchantType: JSON.parse(window.localStorage.getItem('merchantType') || '{}')
} }
const mutations = { const mutations = {
@ -47,12 +48,16 @@ const mutations = {
SET_SIDEBAR_STYLE: (state, style) => { SET_SIDEBAR_STYLE: (state, style) => {
state.sidebarStyle = style; state.sidebarStyle = style;
window.localStorage.setItem('sidebarStyle', style); window.localStorage.setItem('sidebarStyle', style);
} },
SET_MERCHANT_TYPE: (state, merchantType) => {
state.merchantType = merchantType;
window.localStorage.setItem('merchantType', JSON.stringify(merchantType));
},
} }
const actions = { const actions = {
// user login // user login
login({ commit }, userInfo) { login ({ commit }, userInfo) {
// const { username, password } = userInfo // const { username, password } = userInfo
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(userInfo).then(response => { login(userInfo).then(response => {
@ -66,7 +71,7 @@ const actions = {
}) })
}) })
}, },
getMenus({ commit }) { getMenus ({ commit }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getMenusApi().then(response => { getMenusApi().then(response => {
commit('SET_MENU_LIST', response.data) commit('SET_MENU_LIST', response.data)
@ -79,7 +84,7 @@ const actions = {
}) })
}, },
// get user info // get user info
getInfo({ commit, state }) { getInfo ({ commit, state }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getInfo(state.token).then(response => { getInfo(state.token).then(response => {
const { data } = response const { data } = response
@ -107,7 +112,7 @@ const actions = {
}, },
// user logout // user logout
logout({ commit, state, dispatch }) { logout ({ commit, state, dispatch }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
logout(state.token).then(() => { logout(state.token).then(() => {
commit('SET_TOKEN', '') commit('SET_TOKEN', '')
@ -127,7 +132,7 @@ const actions = {
}, },
// remove token // remove token
resetToken({ commit }) { resetToken ({ commit }) {
return new Promise(resolve => { return new Promise(resolve => {
commit('SET_TOKEN', '') commit('SET_TOKEN', '')
commit('SET_ROLES', []) commit('SET_ROLES', [])
@ -137,7 +142,7 @@ const actions = {
}, },
// dynamically modify permissions // dynamically modify permissions
changeRoles({ commit, dispatch }, role) { changeRoles ({ commit, dispatch }, role) {
return new Promise(async resolve => { return new Promise(async resolve => {
const token = role + '-token' const token = role + '-token'

25
src/views/product/addProduct/index.vue
View File

@ -448,7 +448,6 @@
align="center" align="center"
min-width="120" min-width="120"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="formValidate.svip_price_type != 0"> <div v-if="formValidate.svip_price_type != 0">
<el-input <el-input
@ -893,12 +892,14 @@
<el-col v-if="deliveryList.length > 0" :span="24"> <el-col v-if="deliveryList.length > 0" :span="24">
<el-form-item label="送货方式：" prop="delivery_way"> <el-form-item label="送货方式：" prop="delivery_way">
<div class="acea-row"> <div class="acea-row">
<el-checkbox-group style="pointer-events: none" v-model="formValidate.delivery_way"> <el-checkbox-group
style="pointer-events: none"
v-model="formValidate.delivery_way"
>
<el-checkbox <el-checkbox
v-for="item in deliveryList" v-for="item in deliveryList"
:key="item.value" :key="item.value"
:label="item.value" :label="item.value"
> >
{{ item.name }} {{ item.name }}
</el-checkbox> </el-checkbox>
@ -1290,7 +1291,7 @@ const defaultObj = {
price: null, price: null,
cost: null, cost: null,
ot_price: null, ot_price: null,
procure_price:null, procure_price: null,
svip_price: null, svip_price: null,
stock: null, stock: null,
bar_code: '', bar_code: '',
@ -1315,7 +1316,7 @@ const defaultObj = {
} }
const objTitle = { const objTitle = {
price: { price: {
title: '售价' title: '零售价'
}, },
cost: { cost: {
title: '成本价' title: '成本价'
@ -1544,11 +1545,12 @@ export default {
], ],
type: 0, type: 0,
modals: false, modals: false,
// attrVal 商品规格内的字段设置
attrVal: { attrVal: {
price: null, price: null,
cost: null, cost: null,
ot_price: null, ot_price: null,
procure_price:null, procure_price: null,
stock: null, stock: null,
bar_code: '', bar_code: '',
weight: null, weight: null,
@ -1597,6 +1599,10 @@ export default {
} }
}, },
mounted () { mounted () {
// console.log(this.$store.state.user.merchantType.type_code); // 店铺类型, 非市级供应链不显示批发价
if (this.$store.state.user.merchantType.type_code != 'TypeSupplyChain') {
delete this.attrVal.procure_price
}
this.formValidate.slider_image = [] this.formValidate.slider_image = []
if (this.$route.params.id) { if (this.$route.params.id) {
this.setTagsViewTitle() this.setTagsViewTitle()
@ -1622,13 +1628,13 @@ export default {
this.productCon() this.productCon()
this.productGetRule() this.productGetRule()
this.getLabelLst() this.getLabelLst()
this.$store.dispatch('settings/setEdit', true) this.$store.dispatch('settings/setEdit', true);
}, },
destroyed () { destroyed () {
window.removeEventListener('popstate', this.goBack, false) window.removeEventListener('popstate', this.goBack, false)
}, },
methods: { methods: {
setSort () { setSort () {
// // ref一定跟table上面的ref一致 // // ref一定跟table上面的ref一致
// const el = this.$refs.tableParameter.$el.querySelectorAll( // const el = this.$refs.tableParameter.$el.querySelectorAll(
@ -2787,7 +2793,4 @@ export default {
width: auto !important; width: auto !important;
} }
} }
</style> </style>