Commit fce2c077 authored by zhanglw's avatar zhanglw

内容管理产品列表

parent 5bbc94fc
This diff is collapsed.
......@@ -7,7 +7,7 @@
</el-select>
<el-input v-model="query.username" clearable placeholder="请输入操作名称" style="width:280px;" />
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
<el-option v-for="item in dict.consult_status" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<date-range-picker v-model="query.createTime" start-placeholder="维护开始日期" style="width: 280px" />
<el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
......@@ -19,7 +19,6 @@
</div>
<div style="text-align: right">
<el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(true)">批量发布</el-button>
<el-button type="danger" icon="el-icon-download" :disabled="!multipleSelection.length" @click="batchOperate(false)">批量撤销</el-button>
</div>
</div>
<!-- 表格 -->
......@@ -31,33 +30,36 @@
<el-table-column prop="xxx" label="操作名称" />
<el-table-column label="状态" width="100">
<template slot-scope="scope">
<div :style="'color:'+textColors[scope.row.status]">{{ dict.label.consult_status[scope.row.status] }}</div>
<div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div>
</template>
</el-table-column>
<el-table-column prop="xxx" label="最后日期" align="center" width="100" />
<el-table-column prop="xxx" label="操作" align="right" width="240">
<template slot-scope="scope">
<el-tooltip content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="撤销"><el-button round plain type="danger" icon="el-icon-download" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip v-if="scope.row.status==='1'" content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="删除"><el-button round plain type="danger" icon="el-icon-delete" @click="toDelete(scope.row)" /></el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
<add-page ref="addPage" />
</div>
</template>
<script>
import { HttpReq } from '@/api/common'
import DateRangePicker from '@/components/DateRangePicker'
import addPage from './add'
export default {
components: { DateRangePicker },
dicts: ['consult_status', 'product_type', 'area_province'],
components: { DateRangePicker, addPage },
dicts: ['issue_status', 'product_type', 'area_province'],
data() {
return {
textColors: ['#ccc', '#32cd32', '#000', '#ff4949'],
textColors: ['#ccc', '#bba', '#32cd32'],
loading: false,
page: 1,
pageSize: 20,
......@@ -88,9 +90,9 @@ export default {
param.pageSize = this.pageSize
param.sort = sort
this.tableData = [
{ username: '张三', area: '火星', status: 1, enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: 2, enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: 3, enabled: false, xxx: '2023-05-09' }
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: '2', enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' }
]
this.total = 2
},
......@@ -119,10 +121,13 @@ export default {
})
},
toAdd() {
this.$refs.addPage.showView()
},
toEdit(item) {
},
toDelete(item) {
},
toSearch() {
this.page = 1
......
<template>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="产品类型名称:" class="form-cell" prop="xxx">
<div class="cell-box">
<el-input v-model="formData.xxx" disabled placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="产品ID:" class="form-cell" prop="xxx">
<div v-for="(item, index) in formData.dataList" :key="index" class="cell-box">
<el-input v-model="item.id" placeholder="产品id" class="cell-input" style="width: 150px" />
<el-input v-model.number="item.index" type="number" placeholder="顺序" class="cell-input" style="width: 150px" />
<el-button v-if="index+1>=formData.dataList.length" icon="el-icon-plus" @click="addDataRow">添加行</el-button>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button @click="cancelView">关闭</el-button>
<el-button type="primary" @click="submitForm()">保存</el-button>
<el-button type="success" @click="submitForm()">发布</el-button>
</div>
</el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'
export default {
dicts: ['supplier_rank'],
data() {
return {
visible: false,
title: '内容管理供应商设置',
formData: {
xxx: '',
dataList: [
{ id: '123', index: '1' },
{ id: '222', index: '2' },
{ id: '333', index: '3' },
{ id: '444', index: '4' },
{ id: '', index: '' }
],
id: null
},
rules: {}
}
},
mounted() {
},
methods: {
addDataRow() {
this.formData.dataList.push({ id: '', index: '' })
},
showView() {
this.visible = true
},
hideView() {
this.$refs.formViewRef.resetFields()
this.visible = false
},
cancelView() {
this.hideView()
},
submitForm() {
this.$refs.formViewRef.validate((valid, obj) => {
if (valid) {
// HttpReq.backstageApi.updateCustomerDetail(this.formData).then((res) => {
// this.$notify({
// title: res.msg,
// type: 'success',
// duration: 2500
// })
// if (res.code === 200) {
// this.cancelView()
// this.$parent.loadData()
// }
// })
// } else {
// this.$message({
// message: '表单信息有误,请核对无误后提交!',
// type: 'error'
// })
}
})
},
loadData(id) {
this.showView()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.cell-box {
min-width: 120px;
.cell-input {
width: 420px;
}
.cell-select {
width: 220px;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
>>>.el-icon-arrow-up:before {
content: '';
}
}
</style>
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="预留" type="success" />
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<el-input v-model="query.username" clearable placeholder="请输入产品类型名称" style="width:280px;" />
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
<el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<date-range-picker v-model="query.createTime" start-placeholder="维护开始日期" style="width: 280px" />
<el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
<div class="toolbar"></div>
<!-- 表格 -->
<div class="content">
<el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh">
<el-table-column type="index" width="55" label="序号" :index="indexMethod" />
<el-table-column prop="area" label="产品类型名称" />
<el-table-column label="状态" width="100">
<template slot-scope="scope">
<div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div>
</template>
</el-table-column>
<el-table-column prop="xxx" label="最后维护日期" align="center" width="200" />
<el-table-column prop="xxx" label="操作" align="right" width="240">
<template slot-scope="scope">
<el-tooltip v-if="scope.row.status==='1'" content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="设置"><el-button round plain icon="el-icon-s-tools" @click="toEdit(scope.row)" /></el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
<edit-page ref="editPage" />
</div>
</template>
<script>
import { HttpReq } from '@/api/common'
import DateRangePicker from '@/components/DateRangePicker'
import editPage from './edit'
export default {
components: { DateRangePicker, editPage },
dicts: ['issue_status', 'product_type', 'area_province'],
data() {
return {
textColors: ['#ccc', '#bba', '#32cd32'],
loading: false,
page: 1,
pageSize: 20,
total: 0,
query: {},
tableData: [],
currentTime: '',
multipleSelection: []
}
},
mounted() {
this.currentTimeFn()
this.$nextTick(() => {
this.loadData()
})
},
methods: {
indexMethod(index) {
return 1 + index + this.page * this.pageSize - this.pageSize
},
handleSelectionChange(val) {
this.multipleSelection = val
},
loadData() {
var sort = 'id,desc'
var param = { ...this.query }
param.page = this.page
param.pageSize = this.pageSize
param.sort = sort
this.tableData = [
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: '2', enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' }
]
this.total = 2
},
batchOperate(opt) {
if (!this.multipleSelection.length) {
return this.$message({
message: '未选取数据',
type: 'info'
})
}
if (opt) {
console.log('启用', this.multipleSelection)
} else {
console.log('启用', this.multipleSelection)
}
},
changeEnabled(data, val) {
this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).catch(() => {
data.enabled = !data.enabled
})
},
toEdit(item) {
this.$refs.editPage.loadData(item.customerId)
},
toSearch() {
this.page = 1
this.loadData()
},
clearLimit() {
this.query = {}
this.currentTimeFn()
this.loadData()
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.pageSize = e
this.loadData()
},
currentTimeFn() {
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (day >= 0 && day <= 9) {
day = '0' + day
}
this.currentTime = year + '-' + month + '-' + day
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.toolbar {
display: flex;
justify-content: space-between;
}
.content {
margin-top: 15px;
overflow: auto;
}
</style>
<template>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="供应商名称:" class="form-cell" prop="xxx">
<div class="cell-box">
<el-input v-model="formData.xxx" disabled placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="供应商ID:" class="form-cell" prop="xxx">
<div class="cell-box">
<el-input v-model="formData.xxx" disabled placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="标识设置:" class="form-cell" prop="supplierLevel">
<div class="cell-box">
<el-select v-model="formData.xxx" disabled placeholder="无" class="cell-select">
<el-option v-for="item in dict.supplier_rank" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="顺序:" class="form-cell" prop="operatingPeriod">
<div class="cell-box">
<el-input v-model.number="formData.index" type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="展示产品ID:" class="form-cell" prop="xxx">
<div class="cell-box">
<el-input v-model="formData.xxx" placeholder="单行输入" class="cell-input" />
</div>
<div class="cell-box">
<el-input v-model="formData.xxx" placeholder="单行输入" class="cell-input" />
</div>
<div class="cell-box">
<el-input v-model="formData.xxx" placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button @click="cancelView">关闭</el-button>
<el-button type="primary" @click="submitForm()">保存</el-button>
<el-button type="success" @click="submitForm()">发布</el-button>
</div>
</el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'
export default {
dicts: ['supplier_rank'],
data() {
return {
visible: false,
title: '内容管理供应商设置',
formData: {
id: null
},
rules: {}
}
},
mounted() {
},
methods: {
showView() {
this.visible = true
},
hideView() {
this.$refs.formViewRef.resetFields()
this.visible = false
},
cancelView() {
this.hideView()
},
submitForm() {
this.$refs.formViewRef.validate((valid, obj) => {
if (valid) {
// HttpReq.backstageApi.updateCustomerDetail(this.formData).then((res) => {
// this.$notify({
// title: res.msg,
// type: 'success',
// duration: 2500
// })
// if (res.code === 200) {
// this.cancelView()
// this.$parent.loadData()
// }
// })
// } else {
// this.$message({
// message: '表单信息有误,请核对无误后提交!',
// type: 'error'
// })
}
})
},
loadData(id) {
this.showView()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.cell-box {
min-width: 120px;
.cell-input {
width: 420px;
}
.cell-select {
width: 220px;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
>>>.el-icon-arrow-up:before {
content: '';
}
}
</style>
<template>
<div style="padding:30px;">
<el-alert :closable="false" title="预留" type="success" />
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<el-select v-model="query.area" clearable placeholder="请选择地区" style="width: 150px">
<el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="query.status" clearable placeholder="请选择标识" style="width: 120px">
<el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="query.username" clearable placeholder="请输入供应商名称" style="width:280px;" />
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
<el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<date-range-picker v-model="query.createTime" start-placeholder="维护开始日期" style="width: 280px" />
<el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
<div class="toolbar">
<div>
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加</el-button>
</div>
<div style="text-align: right">
<el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(true)">批量发布</el-button>
</div>
</div>
<!-- 表格 -->
<div class="content">
<el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column type="index" width="55" label="序号" :index="indexMethod" />
<el-table-column prop="area" label="标识" width="200" />
<el-table-column prop="xxx" label="供应产品名称" />
<el-table-column label="状态" width="100">
<template slot-scope="scope">
<div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div>
</template>
</el-table-column>
<el-table-column prop="xxx" label="最后日期" align="center" width="100" />
<el-table-column prop="xxx" label="操作" align="right" width="240">
<template slot-scope="scope">
<el-tooltip v-if="scope.row.status==='1'" content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="设置"><el-button round plain icon="el-icon-s-tools" @click="toEdit(scope.row)" /></el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
<edit-page ref="editPage" />
</div>
</template>
<script>
import { HttpReq } from '@/api/common'
import DateRangePicker from '@/components/DateRangePicker'
import editPage from './edit'
export default {
components: { DateRangePicker, editPage },
dicts: ['issue_status', 'product_type', 'area_province'],
data() {
return {
textColors: ['#ccc', '#bba', '#32cd32'],
loading: false,
page: 1,
pageSize: 20,
total: 0,
query: {},
tableData: [],
currentTime: '',
multipleSelection: []
}
},
mounted() {
this.currentTimeFn()
this.$nextTick(() => {
this.loadData()
})
},
methods: {
indexMethod(index) {
return 1 + index + this.page * this.pageSize - this.pageSize
},
handleSelectionChange(val) {
this.multipleSelection = val
},
loadData() {
var sort = 'id,desc'
var param = { ...this.query }
param.page = this.page
param.pageSize = this.pageSize
param.sort = sort
this.tableData = [
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: '2', enabled: false, xxx: '2023-05-09' },
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' }
]
this.total = 2
},
batchOperate(opt) {
if (!this.multipleSelection.length) {
return this.$message({
message: '未选取数据',
type: 'info'
})
}
if (opt) {
console.log('启用', this.multipleSelection)
} else {
console.log('启用', this.multipleSelection)
}
},
changeEnabled(data, val) {
this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).catch(() => {
data.enabled = !data.enabled
})
},
toEdit(item) {
this.$refs.editPage.loadData(item.customerId)
},
toSearch() {
this.page = 1
this.loadData()
},
clearLimit() {
this.query = {}
this.currentTimeFn()
this.loadData()
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.pageSize = e
this.loadData()
},
currentTimeFn() {
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (day >= 0 && day <= 9) {
day = '0' + day
}
this.currentTime = year + '-' + month + '-' + day
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.toolbar {
display: flex;
justify-content: space-between;
}
.content {
margin-top: 15px;
overflow: auto;
}
</style>
......@@ -12,7 +12,7 @@
<div class="line-s" />
<div class="fixed-contact-popover">
<div class="fixed-contact-popover-img">
<img src="https://xue-static.uiiiuiii.com/4f5cb006388a55ca5033664ba154db1f-1624264713222.png" alt="">
<img src="../../assets/images/wxgz.jpg" alt="">
</div>
</div>
</li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment