admin_operation/src/views/product/index.vue

<template>
  <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="产品名称"  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.productPrice }}</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="120" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.areaName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" min-width="100" align="center">
            <template slot-scope="scope">
              <!--<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>
      <!-- 分页 -->
        <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 ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">

            <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="流量包ID" :label-width="formLabelWidth"  >
              <el-input v-model.trim="dataForm.packageId" style="width: 90%;"  placeholder="请输入流量包ID" />
            </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.areaName" 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-select size="small" v-model="dataForm.productType"  placeholder="请选择产品类型" style="width: 90%" >
                <el-option
                v-for="item in type"
                :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-form-item label="产品描述" :label-width="formLabelWidth" >
              <el-input v-model.trim="dataForm.productDesc" style="width: 90%;"  placeholder="请输入产品描述" />
            </el-form-item>

          </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 { Search,province,ProductAdd,ProductEdit }  from '@/api/product'
export default {
  data() {
    return {
      body:{
          productName:"",
          productPrice:"",
          Isp:""
      },
      provinceList:[],   //省份
      type:[{
        id:1,
        name:"话费"
      },{
        id:2,
        name:"流量"
      }],
      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:"",
        areaName:"",
        operator:"",
        productCode:"",
        productType:"",
        productDesc:""
      },
      page:1,
      size:10,
      total:0,
      loading:false
    }
  },
  created(){
    this.getTenantList()
    this.onprovince()   //省份
  },
  methods: {
    //表格数据
    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:"",
        areaName:"",
        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(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            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(() => {
          row.isDelete = 1
          ProductEdit(row).then(response => {
            if (response.status === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              that.getTenantList()
            } 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 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; */
   width: 100%;
   /* margin: 0 auto; */
   padding-bottom: 20px;
 }
</style>