admin_operation/src/views/userList/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <span class="textSpan">客户名称:</span>
      <el-input v-model="body.customerName" style="width:200px;" placeholder="客户名称" size="small" clearable />
      <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
      <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="NewUser">新增</el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

      <el-table-column label="客户名称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="客户简称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.shorterName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" >正常</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">暂停</el-tag>
        </template>
      </el-table-column>


      <el-table-column label="帐号余额" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="Logo图片组ID" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.logoGroupId }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="授信额度" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.creditAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="当前费用" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.currentAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="200" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" fixed="right" min-width="250" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 1" size="small" icon="el-icon-close" type="warning" @click="ModifyStatus(scope.row,2)">暂停</el-button>
          <el-button v-if="scope.row.status === 2" size="small" icon="el-icon-check"  @click="ModifyStatus(scope.row,1)">有效</el-button>
          <el-button size="small" icon="el-icon-edit" type="primary" @click="product(scope.row)">产品</el-button>
          <el-button size="small" icon="el-icon-edit" type="warning" @click="ModifyEdit(scope.row)">编辑</el-button>
          <el-button size="small" icon="el-icon-delete" type="danger" @click="ModifyDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

<!-- 添加或修改对话框 -->
        <el-dialog :title="operation?'新增客户':'编辑客户'" width="85%" :visible.sync="dialogFormVisible" center>
          <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
               <!-- 客户基本信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户基本信息</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="客户名称" prop="customerName" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.customerName" />
                      </el-form-item>
                    </el-col>
                    <el-col v-if="!operation" :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="客户ID" :label-width="formLabelWidth"  >
                          <el-input disabled v-model="dataForm.customerId"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="客户简称" prop="shorterName" :label-width="formLabelWidth">
                          <el-input v-model="dataForm.shorterName"  />
                        </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-card>  
              <!-- 客户服务联系人信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户服务联系人信息</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="联系人姓名" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.linkmanName" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="联系人电话" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.linkmanMobile"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="联系人邮箱" :label-width="formLabelWidth">
                          <el-input v-model="dataForm.linkmanEmail"  />
                        </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="联系人地址" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.address" />
                      </el-form-item>
                    </el-col> 
                  </el-row>
                </div>
              </el-card>  
              <!-- 其他 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">其他</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="代理商提成比例" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.partnerCommission" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="合作伙伴ID" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.partnerId"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="价格校验" :label-width="formLabelWidth">
                          <!-- <el-input v-model="dataForm.priceCheck"  /> -->
                          <el-select size="small"  v-model="dataForm.priceCheck">
                            <el-option
                            v-for="item in priceCheck"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            />
                          </el-select>
                        </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="是否有效" :label-width="formLabelWidth"  >
                       <el-select size="small"  v-model="dataForm.status">
                        <el-option
                        v-for="item in status"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
      
                </div>
              </el-card>  
          </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>

        <el-dialog :title="productData.customerName+' 产品'" width="85%" :visible.sync="productShow" center>
          test
          <div slot="footer" class="dialog-footer">
            <el-button @click="productShow = false">取 消</el-button>
            <el-button type="primary" @click="productSubmit">确 定</el-button>
          </div>
        </el-dialog>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import api from '@/api/userList'
export default {
  data() {
    return {
      body: {
        customerName:"",
        size: 10,
        current: 1
      },
      status:[
        {id:1,name:"正常"},
        {id:2,name:"暂停"}
      ],
      priceCheck:[
        {id:0,name:"关闭"},
        {id:1,name:"开启"}
      ],
      operation: false, // true:新增, false:编辑
      dialogFormVisible: false, // 控制弹出框
      formLabelWidth: '120px',   //新增宽度
      dataForm:{
          userId:4,
      },
      productShow:false,
      productData:{}, // 产品查看时的基本数据的数据
      rules2:{
        shorterName: [{ required: true, message: '请输入客户简称', trigger: 'blur' }],
        customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
      },
      loading:false,
      total: 1,
      tableData: [
 
      ]
    }
  },
  created() {
    this.getTenantList()
  },
  methods: {
    //新增弹框
    NewUser() {
      this.operation = true
      this.dialogFormVisible = true
      this.dataForm = {
          userId:4,
      }
    },
    //编辑弹框
    ModifyEdit(row) {
      this.operation = false
      this.dialogFormVisible = true
      this.dataForm = row
    },
    ModifyDelete(row) {
      this.$confirm('此操作将删除客户：' + row.customerName, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.isDeleted = 1
        api.index.update(row).then((resp)=>{
          if (resp.status === 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getTenantList()
          } else {
            this.$message({
              type: 'error',
              message: resp.data.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //数据
    getTenantList(){
      this.loading = true
      api.index.Search(this.body).then((res) => {
        this.loading =false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },

    product(row){
      this.productShow = true
      this.productData = row
    },
    productSubmit(){
      productShow = false
    },
    //新增或修改API
    submitForm(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (!this.operation) {
              console.log(this.dataForm)
              // 编辑
              api.index.update(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)
            //   // 添加
              api.index.userAdd(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
                  })
                }
              })
            }
          }
        })
    },
    ModifyStatus(row,i){
      this.$confirm('是否修改 '+row.customerName+' 的状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        row.status = i 
        api.index.update(row).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
          })
        }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
      
    },
    //搜索
    Search() {
      this.body.current = 1
      this.getTenantList()
    },
    //页码
    handleSizeChange(val) {
      this.body.size = val
      this.getTenantList()
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val
      this.getTenantList()
    }
  }
}
</script>

<style scoped>
    .el-card {
      border: 0px solid #fff;
    }
</style>