webapp / GreenwayWeb

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="onaction == '1'">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商户寻租管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">租赁用户信誉库</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="pageindex">
            <el-form-item label="商家名称">
              <el-input v-model="pageindex.name" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="评分等级">
              <el-select v-model="pageindex.rating" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="A" value="A" />
                <el-option label="B" value="B" />
                <el-option label="C" value="C" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="是否黑名单">
              <el-select v-model="pageindex.isBlackList" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="否" value="" />
                <el-option label="是" value="0" />
              </el-select>
            </el-form-item> -->
          </el-form>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <el-table :data="tableData" :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <!-- <el-table-column label="序号" min-width="100">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column> -->
          <el-table-column label="商家名称" prop="name" min-width="200" />
          <el-table-column label="当前评分等级" prop="rating" min-width="120">

            </el-table-column>
          <el-table-column label="申请时间" prop="applyTime" min-width="200" />
          <el-table-column label="黑名单" prop="isBlackList" min-width="150">

            <template slot-scope="scope">

              {{scope.row.isBlackList=='0'?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200" fixed="right">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="handleEditForm(scope.row)">
                查看
              </div>
			  <!-- v-if="scope.row.isBlackList=='0'" -->
              <div class="tableBtn greens" @click="addbuss(scope.row)" >
                评级
              </div>
              <div class="tableBtn greens" @click="sethei(scope.row.id,'0')" v-if="scope.row.isBlackList=='' || scope.row.isBlackList=='1' ">
                加入黑名单
              </div>
              <div class="tableBtn greens" @click="sethei(scope.row.id,'1')" v-else>
                取消黑名单
              </div>
            </template>
          </el-table-column>
        </el-table>
      <div style="display: flex;justify-content: space-between;" class="bom">
		  <div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 条</div>
        <el-pagination class="pagination" :hide-on-single-page="flag" background  :current-page="pageindex.pageNumber+1"
         layout="prev, pager, next" :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="10"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
        <!-- ******************************************************弹框开始****************************************************** -->
        <!-- 评级弹框 -->
        <el-dialog :visible.sync="ggXin" title="评级" style="padding: 0" width="35%" center
          :close-on-click-modal="false"  :show-close="false">
            <div>
              <el-form ref="rulePing" :model="ruleForm" :rules="rulesOne" label-width="100px">
                <el-form-item label="商家等级" prop="rating">
                  <el-select v-model="ruleForm.rating" placeholder="请选择"  style="width:100%">
              <el-option label="A" value="A" />
              <el-option label="B" value="B" />
              <el-option label="C" value="C" />
                  </el-select>
                </el-form-item>
               <!-- <el-form-item label="服务态度">
                  <el-select v-model="ruleForm.serviceAttitude" placeholder="请选择"  style="width:100%">
                    <el-option label="0" value="0" />
                    <el-option label="1" value="1" />
                    <el-option label="2" value="2" />
                    <el-option label="3" value="3" />
                    <el-option label="4" value="4" />
                    <el-option label="5" value="5" />
                  </el-select>
                </el-form-item>
                <el-form-item label="合规经营">
                  <el-select v-model="ruleForm.complianceOperation" placeholder="请选择"  style="width:100%">
                    <el-option label="0" value="0" />
                    <el-option label="1" value="1" />
                    <el-option label="2" value="2" />
                    <el-option label="3" value="3" />
                    <el-option label="4" value="4" />
                    <el-option label="5" value="5" />
                  </el-select>
                </el-form-item>
                <el-form-item label="商品品质">
                  <el-select v-model="ruleForm.productQuality" placeholder="请选择"  style="width:100%">
                    <el-option label="0" value="0" />
                    <el-option label="1" value="1" />
                    <el-option label="2" value="2" />
                    <el-option label="3" value="3" />
                    <el-option label="4" value="4" />
                    <el-option label="5" value="5" />
                  </el-select>
                </el-form-item>
                <el-form-item label="售后服务">
                  <el-select v-model="ruleForm.afterSalesService" placeholder="请选择"  style="width:100%">
                    <el-option label="0" value="0" />
                    <el-option label="1" value="1" />
                    <el-option label="2" value="2" />
                    <el-option label="3" value="3" />
                    <el-option label="4" value="4" />
                    <el-option label="5" value="5" />
                  </el-select>
                </el-form-item>
                <el-form-item label="设施完善度">
                  <el-select v-model="ruleForm.facilityCompleteness" placeholder="请选择"  style="width:100%">
                    <el-option label="1" value="1" />
                    <el-option label="2" value="2" />
                    <el-option label="3" value="3" />
                    <el-option label="4" value="4" />
                    <el-option label="5" value="5" />
                  </el-select>
                </el-form-item>
                <el-form-item label="消防安全">
                  <el-select v-model="ruleForm.fireSafety" placeholder="请选择"  style="width:100%">
                    <el-option label="0" value="0" />
                    <el-option label="1" value="1" />
                    <el-option label="2" value="2" />
                    <el-option label="3" value="3" />
                    <el-option label="4" value="4" />
                    <el-option label="5" value="5" />
                  </el-select>
                </el-form-item> -->
              </el-form>
            </div>
          <span slot="footer" class="dialog-footer">
            <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="closeFn()">取 消</el-button>
            <el-button style="background-color: #3f9b6a;color:#fff;" @click="addCheck">确 定</el-button>
          </span>
        </el-dialog>

      </div>
    </div>
    <!-- 详情框  :visible.sync="detbox" -->
    <div class="zhuti" v-if="onaction == '3'">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商家信息管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">查看</span></div>
      </div>
      <div>
        <merchantInformation :info="secondData" @removeonaction="removeonaction"></merchantInformation>
      </div>
    </div>

  </div>
</template>

<script>
import merchantInformation from '../../../components/merchantInformation/index.vue'
  import {
    rUserAll,
    rUserAdd,
    rUserEdit,
    rUserDel,
  } from '../../../api/rUser';
  import {
    cerePlatformMerchant,cerePlatformMerchantedit
  } from '../../../api/newly.js'
  export default {
    components: {
	  merchantInformation
    },

    data() {
      return {
        detbox: false, // 详情
        edit: true, // 编辑
        ggXin: false, // 新增
        ruleForm: {
          rating: null,
        },
        secondData: {

        },
        currentPage: 1,
        total: 0,
        flag: false,
        pageSize: 10,
        tableData: [],
        msgid: '',
		onaction: '1',
        pageindex: {
         pageNumber: 0,
         pageSize: 10,
         checkState:'2',
         name: '',
        },
		rulesOne: {
		  rating: [{
		    required: true,
		    message: '请选择商家等级',
		    trigger: 'change'
		  }],
		}
      }
    },

    created() {

    },
    mounted() {
      this.getAll();
    },

    // beforeDestroy() {
    //   const editor = this.editor
    //   if (editor == null) return
    //   editor.destroy() // 组件销毁时，及时销毁编辑器
    // },
    methods: {
      // 获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },


      // 查询全数据
      async getAll() {
        const res = await cerePlatformMerchant(this.pageindex)
    this.tableData = res.data.content
    this.total = res.data.totalElements

      },

      // 查询
     async onSubmit() {
   const res = await cerePlatformMerchant(this.pageindex)
   this.total = res.data.totalElements
   this.tableData = res.data.content
      },

      // 详情点击
       handleEditForm(item) {
        this.secondData = item
        this.onaction = '3'
      },
	  removeonaction(e) {
	    console.error(e)
	    this.onaction = e
	    this.onSubmit()
	  },
      // 评级
      addbuss(item) {
        this.secondData = item
        this.ruleForm = {
          rating: null,
        }
        this.ggXin = true
      },
      // 评级确定
       addCheck() {
		  this.$refs.rulePing.validate((valid) => {
		    if (valid) {
				 this.ruleForm.id = this.secondData.id
				 cerePlatformMerchantedit(this.ruleForm)
				 this.$message({
				   message: '修改成功',
				   type: 'success'
				 })
				}else{
					this.$message({
					  message: '请填写完整信息',
					  type: 'error'
					})
					
				}
			 })	    
			   this.getAll()
			   this.ggXin = false
      },
  handleCurrentChange(val) {
    this.pageindex.pageNumber = val - 1
    this.getAll()
  },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      // 取消
      closeFn(val) {
		     this.ggXin = false;
	  },
      // 重置按钮
      resetting() {
        this.pageindex = {
          pageNumber: 0,
          pageSize: 10,
          checkState:'2',
          name: '',
        },
        this.getAll()
      },
      sethei(ids, num) {
         const h = this.$createElement;
                   this.$msgbox({
                     title: '消息',
                     message: h('p', null, [
                       h('span', null, '是否处理'),
                     ]),
                     showCancelButton: true,
                     showClose:false,
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     customClass:'oe-dialog-btn',
                     beforeClose: (action, instance, done) => {
                       if (action === 'confirm') {
                         cerePlatformMerchantedit({id:ids,isBlackList:num}).then(res=>{
							 this.$message({
							   message: '修改成功',
							   type: 'success'
							 })
                            this.getAll()
                           done();
                         })
                       } else {
                         done();
                       }
         }
         })
       
      }
    }
  }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
  /deep/ .first-column-bg {
    background-color: #FAFAFA !important;
  }

  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }



  

  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }

  .greens {
    color: #3F9B6A;
  }

  /deep/ .el-table__row {
    font-size: 14px;
    color: #000000e6;
    height: 42px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3f9b6a;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /* background: #d3dce6; */
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }


  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }


  ::v-deep .el-tabs__item.is-active {
    color: #3f9b6a;
    opacity: 1;
  }

  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item:hover {
    color: #3f9b6a;
    cursor: pointer;
    opacity: 1;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }

  /deep/ .el-table_2_column_13 {
    font-weight: 100;
  }

  ::v-deep .el-input__inner:focus {
    border: #3f9b6a 1px solid;
  }

  ::v-deep .el-input__inner:hover {
    border: #3f9b6a 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3f9b6a;
  }



  /* ::v-deep .el-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */

  /* 修改未进行步骤的描述文字颜色 */
  ::v-deep .el-steps .el-step__description.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的图标颜色 */
  ::v-deep .el-steps .el-step__icon.is-text.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的边框色 */
  ::v-deep .el-steps .el-step__line.is-wait {
    border-color: #eee;
    /* 修改为你想要的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__line {
    background-color: #3f9b6a;
    /* 修改线的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__title {
    color: #fe7b6a;
    /* 修改进行中步骤的标题颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__icon {
    color: #fff;
    /* 修改进行中步骤的图标颜色 */
    background: #3f9b6a;
    /* 修改进行中步骤图标的边框颜色 */
    border: 0px;
  }

  ::v-deep .el-step__icon-inner {
    line-height: 0;
  }

  /* 线条长度 */
  ::v-deep .el-step.is-vertical .el-step__line {
    top: 30px;
    height: 60px;
  }


  ::v-deep .moren {
    .el-input__inner {
      margin-top: 5px;
      padding: 0 20px;
    }
  }

  /deep/ .el-radio-group {
    margin-top: 11px;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #3f9b6a;
    background: #3f9b6a;
  }

  ::v-deep .el-col {
    padding: 0 !important;
  }

  /deep/ .el-radio-group {
    width: 100%;
  }

  .radio-right-side {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }


  /deep/ .radio-right-side .el-radio__inner {
    order: 1;
  }

  /deep/ .radio-right-side .el-radio__input {
    display: flex;
    order: 2;
  }

  /deep/ .radio-right-side {
    &:hover {
      color: #000;
    }
  }

  ::v-deep .el-dialog__wrapper {
    .dialog_css {
      margin-left: 20%;
      margin-top: 61px !important;

      .el-dialog__title {
        font-size: 14px !important;
        font-weight: 600;
        color: #000;
      }
    }
  }

  ::v-deep .setup {
    .el-steps {
      justify-content: center;
    }
  }

  ::v-deep .el-step__head.is-finish {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }

  ::v-deep .el-step__title.is-finish {
    color: #c0c4cc;
  }

  ::v-deep .el-step__title.is-process {
    color: #c0c4cc;
  }

  ::v-deep .el-tabs {
    width: 100%;
  }

  ::v-deep .setup {
    .el-step__main {
      margin-left: -17px;
    }

    .el-step__title.is-process {
      color: #3f9b6a;
    }

  }

  ::v-deep .el-pagination__jump {
    margin-top: 5px;
  }

  ::v-deep .linClass {
    .el-dialog__header {
      padding: 20px 20px 10px;
      font-size: 14px;
    }
  }
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }


  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }

  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }

    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
</style>