zfb_cms/src/pages/authentication/index.vue

<!--  -->
<template>
<div class='con' v-loading.fullscreen.lock="loading">
  <el-dialog title="企业信息" width="45%" :visible.sync="dialogFormVisible"><!--企业的详细信息窗口-->
    <el-form :model="form" :label-position="'left'" :label-width="formLabelWidth">
      <div class="con-main">
        <div class="d-l">
          <el-form-item label="信息标题：">
            <span>{{c_title}}</span>
          </el-form-item>
          <el-form-item label="联系人：">
            <span>{{c_user}}</span>
          </el-form-item>
          <el-form-item label="手机号：">
            <span>{{c_phone}}</span>
          </el-form-item>
          <el-form-item label="所属区域：">
            <span>{{c_area}}</span>
          </el-form-item>
          <el-form-item label="详细地址：">
            <span>{{c_address}}</span>
          </el-form-item>
          <el-form-item label="企业官网：">
            <span style="color:#0055f2;cursor:pointer" @click="fix_website(c_website)">{{c_website}}</span>
          </el-form-item>
        </div>
        <div class="d-r">
          <el-form-item label="企业LOGO：">
            <div class="c-logo"><img :src="c_logo" alt=""></div>
          </el-form-item>
          <el-form-item label="企业资质：">
            <div class="c-zizhi">
              <img :src="c_zizhi" alt="">
              <a v-if="$base.isImg(c_zizhi)" :href="c_zizhi" download="download" class="c-mask">
                <i class="iconfont icon-download"></i>
              </a>
              <div v-else class="c-mask">
                <i class="iconfont icon-download"></i>
              </div>
            </div>
          </el-form-item>
        </div>
        <el-form-item label="企业简介：">
            <div style="word-break: break-all">{{c_introduce}}</div>
        </el-form-item>
      </div>
    </el-form>
    <div style="text-align:center" class="dialog-footer">
      <div v-if="c_state === 0">
        <el-button type="danger" @click="save(c_id,2)">拒 绝</el-button>
        <el-button type="primary" @click="save(c_id,1)">通 过</el-button>
      </div>
      <el-button type="info" v-else>{{c_state===1?'已通过':'已拒绝'}}</el-button>
    </div>
  </el-dialog>

  <el-dialog title="新增企业" width="45%" :visible.sync="dialogAddCpnyVisible">
    <el-form :model="form" :label-position="'left'" :label-width="formLabelWidth">
      <div style="padding:0 30px">
        <div class="add-l">
          <el-form-item label="*企业名称">
            <el-input show-word-limit maxlength="20" v-model="ac_name"></el-input>
          </el-form-item>
          <el-form-item label="*所属区域">
            <!--<el-input v-model="ac_belongArea"  placeholder="请以一个空格为间隔，如“XX省 XX市 XX区”" rows="2" type="textarea" resize="none"></el-input>-->
            <el-input v-model="ac_add_province" style="width:25%"></el-input><span>省</span>
            <el-input v-model="ac_add_city" style="width:25%"></el-input><span>市</span>
            <el-input v-model="ac_add_area" style="width:25%"></el-input><span>区</span>
          </el-form-item>
          <el-form-item label="*详细地址">
            <el-input show-word-limit maxlength="50" v-model="ac_address"></el-input>
          </el-form-item>
          <el-form-item label="*企业LOGO">
            <el-upload
              :headers="{token}"
              :action="serverName+'/company/uploadLogo'"
              :show-file-list="true"
              :before-upload="beforeAvatarUpload"
              :on-change="handleChange"
              :file-list="fileList"
              :on-success="upload_success"
              :on-error="upload_fail">
              <div class="zfb-load">
                <el-button style="float:left;" size="small" type="primary">点击上传</el-button>
                <div style="font-size:10px;float:left;" slot="tip">1.支持png、jpg和gif图片格式;</div>
                <div style="font-size:10px;float:left;" slot="tip">2.最多可上传1张图;</div>
                <div style="font-size:10px;float:left;" slot="tip">3.最大可上传10M的图片。</div>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="企业简介">
            <el-input type="textarea" resize="none" rows="9" show-word-limit maxlength="100" v-model="ac_introduce"></el-input>
          </el-form-item>
        </div>

        <div class="add-r">
          <el-form-item label="*联系人">
            <el-input show-word-limit maxlength="20" v-model="ac_user"></el-input>
          </el-form-item>
          <el-form-item label="*手机号">
            <el-input v-model="ac_phone"></el-input>
          </el-form-item>
          <el-form-item label="企业官网">
            <el-input v-model="ac_website" rows="2" type="textarea" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="*企业资质">
            <el-upload
              :action="serverName+'/company/uploadLogo'"
              :show-file-list="true"
              :before-upload="beforeAvatarUpload"
              :on-change="handleChange"
              :file-list="fileList2"
              :on-success="upload_success"
              :on-error="upload_fail">
              <div class="zfb-load">
                <el-button style="float:left" size="small" type="primary">点击上传</el-button>
                <div style="font-size:10px;float:left;" slot="tip">1.支持png、jpg和gif图片格式;</div>
                <div style="font-size:10px;float:left;" slot="tip">2.最多可上传1张图;</div>
                <div style="font-size:10px;float:left;" slot="tip">3.最大可上传10M的图片。</div>
              </div>
            </el-upload>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div style="text-align:center" class="dialog-footer">
      <div>
        <el-button @click="dialogAddCpnyVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCompany()">提 交</el-button>
      </div>
    </div>
  </el-dialog>

  <div class="h-header"><!--企业认证的头部内容-->
    <vcenter>
      <div>
        <el-dropdown>
          <el-button type="primary">
            {{dropdown_active.text}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="padding:0" v-for="(item,i) in dropdown_actives" :key="i">
              <div style="padding:0 20px;" @click="dropdown_active=item">{{item.text}}</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="h-input">
        <span>时间段：</span>
      </div>
      <div class="fix-date">
        <el-date-picker v-model="value5" type="datetimerange" :picker-options="pickerOptions2" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" align="right">
        </el-date-picker>
      </div>
      <div class="h-input"><span>手机号：</span></div>
      <div>
        <el-input v-model="userName" placeholder="输入手机号查询"></el-input>
      </div>
      <div>
        <el-button @click="refresh" type="primary">搜索</el-button>
      </div>

      <div style="float:right;padding-right:20px">
        <el-button @click="showAdd" type="primary">新增企业</el-button>
      </div>

    </vcenter>
  </div>
  <div class="h-body">
    <el-table height="520" :data="tableData" style="width: 100%;padding:0 20px;">
      <el-table-column v-for="(item,i) in tableHeader" :key="i" :prop="item.name" :label="item.label"><!--企业认证表格前三个标题：提交日期、企业名称、手机号-->
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span :class="scope.row.state.class">{{scope.row.state.text}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="o-span" @click="show(scope.row)">详细信息</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="p-con">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import vcenter from '@/components/vcenter'
import {
  serverName
} from '@/utils/http'
const tableHeader = [{
  name: 'createTime',
  label: '提交日期'
}, {
  name: 'name',
  label: '企业名称'
}, {
  name: 'userName',
  label: '手机号'
}]
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    vcenter
  },
  data () {
    // 这里存放数据
    return {
      dropdown_actives: [{
        text: '全部',
        id: ''
      },
      {
        text: '已通过',
        id: 1
      },
      {
        text: '审核中',
        id: 0
      },
      {
        text: '已拒绝',
        id: 2
      }
      ],
      dropdown_active: {
        text: '全部',
        id: ''
      },
      serverName,
      fileList:[],
      fileList2:[],
      tableData: [],
      tableHeader,
      dialogFormVisible: false,
      dialogAddCpnyVisible: false,
      currentPage: 1,
      value3: true,
      loading: false,
      formLabelWidth: '100px',
      userName: '',
      form: {},
      size: 10,
      total: 0,
      c_id: '',
      c_title: '',
      c_user: '',
      c_phone: '',
      c_area: '',
      c_address: '',
      c_website: '',
      c_introduce: '',
      c_logo: '',
      c_zizhi: '',
      c_state: '',
      inpuKey: '',
      ac_name:'',
      ac_belongArea:'',
      ac_add_province:'',
      ac_add_city:'',
      ac_add_area:'',
      ac_address:'',
      ac_logo:'',
      ac_introduce:'',
      ac_user:'',
      ac_phone:'',
      ac_website:'',
      ac_zizhi:'',
      pickerOptions2: {                             //:picker-options="pickerOptions2"
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()//声明只读Date类型变量，此时end和start为当前时间
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)//start的时间设为距离现在一周前的日期
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)//start的时间设为距离现在一个月前的日期
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)//start的时间设为距离现在三个月前的日期
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value5: []
    }
  },
  // 监听属性 类似于data概念
  computed: {
    token () {
      return window.localStorage.getItem('zfb_token')
    }
  },
  // 监控data中的数据变化
  watch: {
    currentPage () {
      this.refresh()
    },
    size () {
      this.refresh()
    }
  },
  // 方法集合
  methods: {
    fix_website (value) {                               //value值如有“https://”的话在新窗口打开value存的地址，没有的话添加前缀名后再打开
      if (this.$base.isContain(value, 'http://') || this.$base.isContain(value, 'https://')) {
        window.open(value, '_blank')
      } else {
        window.open('http://' + value, '_blank')
      }
    },
    handleSizeChange (val) {                            
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    refresh () {                                          //重新加载数据
      this.loading = true
      this.getData()
      this.loading = false
    },
    clearInfo () {                                        
      this.dialogFormVisible = false                      //隐藏弹窗
      this.$bus.$emit('refresh', true)                    //触发当前实例上的refresh()
      this.refresh()
    },

    async save (id = '', state = '') {
      await this.$http({
        method: 'post',
        data: {
          id,
          state
        },
        url: '/company/auditCompany',
        headers: {
          token: window.localStorage.getItem('zfb_token')
        }
      }).then(res => {
        if (res.code === 200) {
          this.$alert('审核成功!', {
            confirmButtonText: '确定',
            callback: action => {
              this.clearInfo()
            }
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.message
          })
        }
      })
    },

    async getData () {
      let params = {
        userName: this.userName || '',
        startTime: this.value5 ? this.value5[0] : '',
        endTime: this.value5 ? this.value5[1] : '',
        state: this.dropdown_active.id !== '' ? this.dropdown_active.id : ''
      }
      let result = await this.$http({
        method: 'post',
        data: params,
        url: '/company/selectCompanyByType',
        headers: {
          token: window.localStorage.getItem('zfb_token'),
          pageNum: this.currentPage,
          pageSize: this.size
        }
      })
      for (let i = 0; i < result.message.list.length; i++) {
        result.message.list[i].createTime = this.$base.dateFormat('yyyy-MM-dd hh:mm', new Date(result.message.list[i].createTime))
        result.message.list[i].state = this.fixState(result.message.list[i].state)
      }
      this.tableData = result.message.list

      this.total = result.message.total
      this.currentPage = result.message.pageNum
    },
    async show (item) {
      this.dialogFormVisible = true
      let result = await this.$http({
        method: 'post',
        data: {
          id: item.id
        },
        url: '/company/selectCompanyById',
        headers: {
          token: window.localStorage.getItem('zfb_token')
        }
      })
      let list = result.message
      this.c_id = list.id || ''
      this.c_title = list.name || ''
      this.c_user = list.contacts || ''
      this.c_phone = list.phone || ''
      this.c_area = list.area || ''
      this.c_address = list.address || ''
      this.c_website = list.website || ''
      this.c_logo = list.logo || ''
      this.c_zizhi = list.qualification || ''
      this.c_introduce = list.introduce || ''
      this.c_state = list.state
    },
    fixState (state) {                        //通过state值返回一个obj对象表示审核状态，内容有status，文本text，选择器名class
      let obj = {}
      switch (state) {
        case 0:
          obj = {
            status: 0,
            text: '审核中',
            class: 'zfb-shenhe'
          }
          break

        case 1:
          obj = {
            status: 1,
            text: '已通过',
            class: 'zfb-success'
          }
          break

        case 2:
          obj = {
            status: 2,
            text: '已拒绝',
            class: 'zfb-reject'
          }
          break

        default:
          break
      }
      return obj
    },
    beforeAvatarUpload (file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!')
        return false
      }
      const isFormat = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/gif'
      if (!isFormat) {
        this.$message.error('上传图片格式错误!')
        return false
      }
      return isLt10M && isFormat
    },
    showAdd(){
      this.dialogAddCpnyVisible = !this.dialogAddCpnyVisible
    },
    handleChange (file, fileList) {
      console.log('file', file)
      console.log('fileList', fileList)

      if (fileList.length > 1) {
        this.fileList = fileList.slice(-1)
      }
    },
    upload_success (data) {
      console.log('上传成功')

      this.homepic = data.message
    },
    upload_fail (data) {
      this.$notify.error({
        title: '上传失败',
        message: data.message
      })
    },
    //新增企业
    addCompany(){
      let params = {
        name: this.ac_name,
        area: this.ac_add_province + '省 ' + this.ac_add_city + '市 ' + this.ac_add_area + '区',
        address: this.ac_address,
        logo: this.ac_logo,
        introduce: this.ac_introduce,
        contacts: this.ac_user,
        phone: this.ac_phone,
        website: this.ac_website,
        qualification: this.ac_zizhi
      }
      this.$http({
        method: 'post',
        data: params,
        url: '/company/back/save',
        headers: {
          token: window.localStorage.getItem('zfb_token')
        }
      }).then(res =>{
        if(res.code === 200){
          this.$alert('新增成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogAddCpnyVisible = false
              this.clearInfo()
              this.refresh()
            }
          })
        }else{
          this.$notify.error({
            title:'错误',
            message:res.message
          })
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.refresh()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="scss" scoped>
.con {
  .con-main {
    padding: 0 30px;
    .d-l {
      display: inline-block
    }

    .d-r {
      float: right;

      .c-logo {
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f5fafe;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .c-zizhi {
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        border-radius: 4px;
        position: relative;
        background-color: #f5fafe;

        img {
          width: 100%;
          height: 100%;
        }

        .c-mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.5);
          text-align: center;
          display: table;

          .icon-download {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
            color: #fff;
            font-size: 20px;
          }
        }
      }
    }
  }

  .add-l{
    display: inline-block;
    width:45%;
  }
  .add-r{
    width:45%;
    float: right;
  }

  .ei-num {
    .el-input-number {
      width: 90%;
    }
  }

  .ei-input {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;

    .input-con {
      display: inline-block;
      width: 45%;
      margin: 2px 5px 2px 0;
      height: 60px;
      position: relative;

      .el-input_err {
        & /deep/ .el-input__inner {
          border: 1px solid #f56c6c;
        }
      }

      .el-input_success {
        & /deep/ .el-input__inner {
          border: 1px solid #67c23a;
        }
      }

      span {
        color: #f56c6c;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        left: 0;
      }
    }

  }

  .h-header {
    height: 80px;
    background-color: #fff;
    padding-left: 20px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;

    div {
      display: inline-block;
      vertical-align: middle;
    }

    .h-input {
      margin-left: 20px;
      display: inline-block;
    }

    .fix-date {
      div {
        display: flex;
      }
    }
  }

  .h-body {
    width: 100%;
    margin: 30px 0 0;
    padding-top: 20px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background-color: #fff;

    .o-span {
      color: #0175dc;
      cursor: pointer;
    }

    .p-con {
      width: 100%;
      text-align: right;
      padding: 25px 20px 30px;
    }
  }
}
</style>