|
|
@@ -1,120 +1,368 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <!-- <el-button type="primary" round @click="Search()">DEBUG重请求</el-button> -->
|
|
|
- <el-table v-loading="loading" :data="tableData" border style="width: 100%">
|
|
|
- <el-table-column type="selection" />
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="filter-container" style="margin: 10px 0 10px 0">
|
|
|
+ <!-- 搜索字段 -->
|
|
|
+ <div class="flex">
|
|
|
+ <div class="w_input">
|
|
|
+ <span class="textSpan"> 运营商：</span>
|
|
|
+ <el-select size="small" v-model="body.Isp" clearable placeholder="请选择运营商" style="width: 65%" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in status"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="w_input">
|
|
|
+ <span class="textSpan"> 面额：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="body.productPrice"
|
|
|
+ style="width: 65%;"
|
|
|
+ placeholder="请输入面额"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="w_input">
|
|
|
+ <span class="textSpan">产品名称：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="body.productName"
|
|
|
+ style="width:65%;"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 新增与搜索 -->
|
|
|
+ <div class="flexend">
|
|
|
+ <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="handleSearch">搜索</el-button>
|
|
|
+ <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="handleAdd">新增
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table v-loading="loading" :data="tableData" border style="width: 100%">
|
|
|
+ <!-- <el-table-column type="selection" /> -->
|
|
|
|
|
|
- <el-table-column label="产品ID" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.productId }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column label="产品ID" width="100" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.productId }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- <el-table-column label="流量包ID" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.packageId }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
-
|
|
|
- <!-- <el-table-column label="产品代码" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.productCode }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
-
|
|
|
- <el-table-column label="产品名称" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.productName }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- <el-table-column label="产品类别" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span v-if="scope.row.productType==1">话费</span>
|
|
|
- <span v-if="scope.row.productType==2">流量</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
-
|
|
|
- <el-table-column label="面额" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.productPrice }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- <el-table-column label="产品归属" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.productBelongTo }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
-
|
|
|
- <!-- <el-table-column label="产品描述" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.productDesc }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
+ <el-table-column label="产品名称" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.productName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="产品编码" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.productCode }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- <el-table-column label="创建者" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.creator }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
+ <el-table-column label="面额" width="100" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.productPrice }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- <el-table-column label="创建时间" width="160" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.createTime }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
+ <el-table-column label="运营商" width="100" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 运营商 1 ： 移动 2 ： 电信 3 ： 联通 -->
|
|
|
+ <span v-if="scope.row.operator==1">移动</span>
|
|
|
+ <span v-if="scope.row.operator==2">电信</span>
|
|
|
+ <span v-if="scope.row.operator==3">联通</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- <el-table-column label="更新者" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.updator }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
+ <el-table-column label="产品所属地区" width="120" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.zone }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- <el-table-column label="更新时间" width="100" align="center" show-overflow-tooltip>
|
|
|
+ <el-table-column label="操作" fixed="right" min-width="100" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ scope.row.updateTime }}</span>
|
|
|
+ <!--<el-button @click="handRest(scope.row)" type="warning" size="small">重置密码</el-button>-->
|
|
|
+ <el-button size="small" icon="el-icon-edit" type="warning" plain @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button size="small" icon="el-icon-delete" type="danger" plain @click="handleDelete(scope.row)">删除
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
- </el-table-column> -->
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-table-column label="运营商" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <!-- 运营商 1 ： 移动 2 ： 电信 3 ： 联通 -->
|
|
|
- <span v-if="scope.row.Isp==1">移动</span>
|
|
|
- <span v-if="scope.row.Isp==2">电信</span>
|
|
|
- <span v-if="scope.row.Isp==3">联通</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ current-page.sync="page"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ :current-page="page"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ :page-size="size"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ background
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 添加或修改对话框 -->
|
|
|
+ <el-dialog :title="operation?'新增产品':'编辑产品'" :visible.sync="dialogFormVisible" center>
|
|
|
+ <el-form :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
|
|
|
|
|
|
- <el-table-column label="适用区域" width="100" align="center" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.ZONE }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-form-item label="产品名称" :label-width="formLabelWidth" prop="productName" >
|
|
|
+ <el-input v-model.trim="dataForm.productName" style="width: 90%;" placeholder="请输入产品名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="面额" :label-width="formLabelWidth" >
|
|
|
+ <el-input v-model.trim="dataForm.productPrice" style="width: 90%;" placeholder="请输入面额" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品所属地区" :label-width="formLabelWidth" >
|
|
|
+ <!-- <el-input v-model="dataForm.ZONE" style="width: 90%;" placeholder="请选择产品地区" /> -->
|
|
|
+ <el-select size="small" v-model="dataForm.zone" clearable placeholder="请选择产品地区" style="width: 90%" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in provinceList"
|
|
|
+ :key="item.name"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运营商" :label-width="formLabelWidth" >
|
|
|
+ <el-select size="small" v-model="dataForm.operator" placeholder="请选择运营商" style="width: 90%" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in status"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品编码" :label-width="formLabelWidth" >
|
|
|
+ <el-input v-model.trim="dataForm.productCode" style="width: 90%;" placeholder="请输入产品编码" />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
-import api from '@/api/product'
|
|
|
+import { Search,province,ProductAdd,ProductEdit } from '@/api/product'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- tableData: []
|
|
|
+ body:{
|
|
|
+ productName:"",
|
|
|
+ productPrice:"",
|
|
|
+ Isp:""
|
|
|
+ },
|
|
|
+ provinceList:[], //省份
|
|
|
+ status:[{
|
|
|
+ id:"1",
|
|
|
+ name:"移动"
|
|
|
+ },{
|
|
|
+ id:"2",
|
|
|
+ name:"电信"
|
|
|
+ },{
|
|
|
+ id:"3",
|
|
|
+ name:"联通"
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableData: [],
|
|
|
+ operation: false, // true:新增, false:编辑
|
|
|
+ dialogFormVisible: false, // 控制弹出框
|
|
|
+ formLabelWidth: '120px', //新增宽度
|
|
|
+ rules2: {
|
|
|
+ productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ dataForm:{
|
|
|
+ productName:"",
|
|
|
+ productPrice:"",
|
|
|
+ zone:"",
|
|
|
+ operator:"",
|
|
|
+ productCode:""
|
|
|
+ },
|
|
|
+ page:1,
|
|
|
+ size:10,
|
|
|
+ total:0,
|
|
|
+ loading:false
|
|
|
}
|
|
|
},
|
|
|
+ created(){
|
|
|
+ this.getTenantList()
|
|
|
+ this.onprovince() //省份
|
|
|
+ },
|
|
|
methods: {
|
|
|
- Search(operator) {
|
|
|
- api.Search(operator).then((resp) => {
|
|
|
- this.tableData = resp.data.data
|
|
|
+ //表格数据
|
|
|
+ getTenantList() {
|
|
|
+ this.loading = true
|
|
|
+ const params = new URLSearchParams()
|
|
|
+ params.append('productName', this.body.productName)
|
|
|
+ params.append('productPrice', this.body.productPrice)
|
|
|
+ params.append('operator', this.body.Isp)
|
|
|
+ params.append('current', this.page)
|
|
|
+ params.append('size', this.size)
|
|
|
+ Search(params).then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ this.tableData=res.data.data.records
|
|
|
+ this.total=res.data.data.total
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ //省份数据
|
|
|
+ onprovince(){
|
|
|
+ province().then((res)=>{
|
|
|
+ // console.log(res)
|
|
|
+ let province = res.data.data
|
|
|
+ let arry=province.map((res)=>{
|
|
|
+ return {name:res}
|
|
|
+ })
|
|
|
+ this.provinceList = arry
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //搜索
|
|
|
+ handleSearch(){
|
|
|
+ this.page = 1
|
|
|
+ this.getTenantList()
|
|
|
+ },
|
|
|
+ //新增
|
|
|
+ handleAdd(){
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ this.operation = true
|
|
|
+ this.dataForm={
|
|
|
+ productName:"",
|
|
|
+ productPrice:"",
|
|
|
+ zone:"",
|
|
|
+ operator:"",
|
|
|
+ productCode:""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //编辑
|
|
|
+ handleEdit: function(row) {
|
|
|
+ this.dataForm={}
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ this.operation = false
|
|
|
+ let newObj=JSON.parse(JSON.stringify(row))
|
|
|
+ this.dataForm = newObj
|
|
|
+
|
|
|
+ // this.dataForm = Object.assign({}, row)
|
|
|
+ // this.dataForm.jobId = row.jobId
|
|
|
+ },
|
|
|
+ //新增或修改API
|
|
|
+ submitForm(){
|
|
|
+ if (!this.operation) {
|
|
|
+ // 编辑
|
|
|
+ ProductEdit(this.dataForm).then(response => {
|
|
|
+ if (response.status === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '操作成功'
|
|
|
+ })
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.getTenantList()
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: response.data.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log(this.dataForm)
|
|
|
+ // // 添加
|
|
|
+ ProductAdd(this.dataForm).then(response => {
|
|
|
+ if (response.status === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '操作成功'
|
|
|
+ })
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.getTenantList()
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: response.data.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ handleDelete: function(row) {
|
|
|
+ const that = this
|
|
|
+ this.$confirm('此操作将删除该产品, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // deleteUser(row.userId).then(response => {
|
|
|
+ // if (response.status === 200) {
|
|
|
+ // this.$message({
|
|
|
+ // type: 'success',
|
|
|
+ // message: '操作成功'
|
|
|
+ // })
|
|
|
+ // that.adminList()
|
|
|
+ // } else {
|
|
|
+ // this.$message({
|
|
|
+ // type: 'error',
|
|
|
+ // message: response.data.msg
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //分页
|
|
|
+ handleSizeChange:function(val){
|
|
|
+ this.size=val
|
|
|
+ this.getTenantList()
|
|
|
+ },
|
|
|
+ // 换页
|
|
|
+ handleCurrentChange: function(val) {
|
|
|
+ this.page = val
|
|
|
+ this.getTenantList()
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
+<style scoped>
|
|
|
+.flex{
|
|
|
+ width: 90%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /* flex-wrap: wrap; */
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .w_input{
|
|
|
+ width:35.333%;
|
|
|
+ }
|
|
|
+ .textSpan{
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color:rgb(87, 86, 86)
|
|
|
+ }
|
|
|
+ .flexend{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 2rem;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
</style>
|
