yiliangyiyun-pc/src/views/platformaudit/grainPulseDynamic.vue

<!--粮脉动态审核-->
<template>
  <div>
    <BaseHeaderLayout :leftSpan="15">
      <template slot="right">
        <ws-select v-model="searchTypeText" placeholder="" class="typeselect" @change="selectExamineType"
          :value="searchType">
          <ws-option v-for="item in searchTypeList" :key="item.value" :label="item.value" :value="item.value"
            style="color: #8890b1" />
        </ws-select>
        <ws-input class='findinput' v-model="searchKeyWord" placeholder="可按账号、发布主体查找" clearable maxlength="500"
          @keyup.enter.native="lookUp()" type="input"></ws-input>
        <ws-button class="find" type="primary" @click="lookUp()"><img width="16" height="16" style="
              vertical-align: text-top;
              position: relative;
              top: 0px;
              left: -8px;
            " src="../../../public/img/sousuo.png" alt="" /></ws-button>
        <!-- </div> -->
      </template>
    </BaseHeaderLayout>
      <el-table class="wenzi" :data="dynamicsList.records" style="width: 100%" height="calc(100% - 110px)">
        <el-table-column type="index" label="序号" width="50">
          <template scope="scope">
            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="昵称"> </el-table-column>
        <el-table-column prop="phone" label="账号"></el-table-column>
        <el-table-column prop="compName" label="发布主体"> </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="updateDate" label="更新时间" width="140">
        </el-table-column>
        <el-table-column prop="" label="操作" width="180">
          <template slot-scope="scope">
            <div class="record" @click="nocomplete(scope.row)"
              v-hasPermission="`audit.tranMerchant.tranMerchantInfo.view`">
              查看
            </div>
            <div class="record" @click="deleteclick(scope.row)"
              v-hasPermission="`audit.tranMerchant.tranMerchantInfo.view`">
              删除
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="审核">
          <!-- class="record"
           class="record" -->
          <template slot-scope="scope">
            <div class="record" v-if="scope.row.statusFlag == 1" @click="rejectList(scope.row)">
              驳回
            </div>
            <div class="record" v-if="scope.row.statusFlag == 1" @click="adoptList(scope.row)"
              v-hasPermission="`audit.tranMerchant.tranMerchantInfo.view`">
              通过
            </div>
            <template v-else v-hasPermission="`audit.tranMerchant.tranMerchantInfo.view`" slot-scope="scope">
              {{ scope.row.status }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="deptBudgetTotal">
      </el-pagination>
    <!--动态信息-->
    <el-dialog width="40%" title="查看动态信息" :visible.sync="dialogFormVisible" :append-to-body="true">
      <el-form class="customer" :model="form">
        <el-form-item label="发布主体" :label-width="formLabelWidth">
          {{ SettledCompanyDynamicsList.compName }}
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth">
          {{ SettledCompanyDynamicsList.title }}
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          {{ SettledCompanyDynamicsList.content }}
        </el-form-item>
        <el-form-item label="定位" :label-width="formLabelWidth">
          {{ SettledCompanyDynamicsList.city }}
        </el-form-item>
        <el-form-item label="附件" :label-width="formLabelWidth">
          <div :key="index" v-for="(item, index) in SettledCompanyDynamicsList.address">
            <img style="float:left" v-if="item" :src="item" class="avatar">
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span v-if="SettledCompanyDynamicsList.statusFlag == '1'">
          <el-button @click="reject(id)">驳回</el-button>
          <el-button @click="adopt(id)">通过</el-button>
        </span>
        <span v-else-if="SettledCompanyDynamicsList.statusFlag != '1'">
          <el-button @click="dialogFormVisible = fase">关闭</el-button>
        </span>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import {
    dynamicsList,
    dynamicsLook,
    dynamicsDelete,
    dynamicsExamine,
  } from '@/model/platformaudit/index'
  import Pagination from '@/components/Pagination'
  import WsUpload from '@/components/WsUpload'
  import {
    EventBus
  } from 'base-core-lib'
  export default {
    name: 'viewSpareMoney',
    components: {
      WsUpload,
      Pagination,
    },
    watch: {
      vesselId(val) {
        this.getList()
      },
      isShow(val) {
        this.showType = val
      },
    },
    data() {
      return {
        //弹出框
        dialogFormVisible: false,
        dialogViewSpareMoney: false,
        // 表格显示数据
        tableDate: [],
        wrapstatus: false,
        // 是否显示
        showType: true,
        // 年
        year: '',
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        searchTypeText: '待审核',
        searchKeyWord: '',
        imgUrl: '',
        // 提交类型
        submitType: true,
        size: 10,
        spanArr: [],
        searchType: 1,
        compId: localStorage.getItem('ws-pf_compId'),
        deptCircularPage: {},
        dynamicsList: [],
        pcFlag: 1,
        formLabelWidth: '120px',
        form: {},
        SettledCompanyDynamicsList: {
          compName: '',
          title: '',
          content: '',
          address: '',
          city: '',
        },
        deptBudgetList: {},
        searchTypeList: [{
            value: '待审核',
            type: 1
          },
          {
            value: '已通过',
            type: 2
          },
          {
            value: '全部',
            type: ''
          },
        ],
        settledCompanyDynamicsInfo: {
          id: '',
          flag: '',
        },
        accessoryTFs: false,
      }
    },
    activated() {
      this.getList()
      this.showType = this.isShow
    },
    methods: {

      getSpanArr(data) {
        let that = this
        //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
        that.spanArr = []
        that.pos = 0
        //遍历数据
        data.forEach((item, index) => {
          //判断是否是第一项

          // if (index === 0) {
          //   this.spanArr.push(1)
          //   this.pos = 0
          // } else {
          //不是第一项时，就根据标识去存储
          if (data[index].warehouseNumViewList.length > 1) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] = data[index].warehouseNumViewList.length
            this.spanArr.push(0)
          } else {
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1)
            this.pos = index
          }
          // }
        })
      },
      //     close(index) {
      //   this.addressUrls.splice(index, 1)
      // },
      //删除
      deleteclick(row) {
        this.$confirm(`动态信息删除后不可恢复，是否确定删除？`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            dynamicsDelete({
                id: row.id,
              })
              .toPromise()
              .then((response) => {
                this.getList()
              })
          })
          .catch(() => {
            return false
          })
      },
      //查看//传参
      nocomplete(row) {
        dynamicsLook({
            id: row.id,
          })
          .toPromise()
          .then((response) => {
            this.SettledCompanyDynamicsList = response
            if (response.address != null) {
              this.SettledCompanyDynamicsList.address = response.address.split(',')
            }
            this.id = response.id
          })
        this.dialogFormVisible = true
      },
      //查找
      lookUp() {
        this.currentPage = 1
        this.getList()
      },
      selectExamineType(e) {
        for (var i = 0; i < this.searchTypeList.length; i++) {
          if (this.searchTypeList[i].value == e) {
            this.searchType = this.searchTypeList[i].type
          }
        }
        this.currentPage = 1
        this.getList()
      },
      //审核通过
      adopt(id) {
        this.settledCompanyDynamicsInfo.flag = 1
        this.settledCompanyDynamicsInfo.id = id
        this.$confirm(`确定通过该动态信息？`, '提示', {
            confirmButtonText: '通过',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            dynamicsExamine(this.settledCompanyDynamicsInfo)
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '通过成功',
                })
                this.dialogFormVisible = false
                this.getList()
              })
              .catch((response) => {
                EventBus.$emit('error', response.message)
              })
          })
          .catch(() => {
            return false
          })
      },
      //列表审核通过
      adoptList(row) {
        this.settledCompanyDynamicsInfo.flag = 1
        this.settledCompanyDynamicsInfo.id = row.id
        this.$confirm(`确定通过该动态信息？`, '提示', {
            confirmButtonText: '通过',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            dynamicsExamine(this.settledCompanyDynamicsInfo)
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '通过成功',
                })
                this.getList()
              })
              .catch((response) => {
                EventBus.$emit('error', response.message)
              })
          })
          .catch(() => {
            return false
          })
      },
      //审核驳回
      reject(id) {
        this.settledCompanyDynamicsInfo.flag = 2
        this.settledCompanyDynamicsInfo.id = id
        this.$confirm(`确定驳回该动态信息？`, '提示', {
            confirmButtonText: '驳回',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            dynamicsExamine(this.settledCompanyDynamicsInfo)
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '驳回成功',
                })
                this.dialogFormVisible = false
                this.getList()
              })
              .catch((response) => {
                console.log(response)
                EventBus.$emit('error', response.message)
              })
          })
          .catch(() => {
            return false
          })
      },
      //列表审核驳回
      rejectList(row) {
        this.settledCompanyDynamicsInfo.flag = 2
        this.settledCompanyDynamicsInfo.id = row.id
        this.$confirm(`确定驳回该动态信息？`, '提示', {
            confirmButtonText: '驳回',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            dynamicsExamine(this.settledCompanyDynamicsInfo)
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '驳回成功',
                })
                this.getList()
              })
              .catch((response) => {
                console.log(response)
                EventBus.$emit('error', response.message)
              })
          })
          .catch(() => {
            return false
          })
      },
      dateFormat(fmt, date) {
        let ret
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          // "M+": date.getMinutes().toString(),         // 分
          // "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
      },
      handleClose() {
        this.accessoryTFs = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      //粮脉动态列表
      getList() {
        dynamicsList({
            searchType: this.searchType,
            // phone: this.phone,
            pcFlag: this.pcFlag,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchKeyWord: this.searchKeyWord,
          })
          .toPromise()
          .then((response) => {
            this.dynamicsList = response
            this.deptCircularPage.currentPage = response.current
            this.deptCircularPage.pageSize = response.size
            this.deptBudgetTotal = response.total
          })
      },
      // 关闭 dialog时 处理文件url 初始化upload组件
      handleCloe() {
        this.dialogViewSpareMoney = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .container {
    width: 100%;
    margin: 0 auto;
  }

  .vertical-text-left {
    width: 62px;
    text-align: right;
  }

  .el-button--primary {
    background-color: #5878e8;
    border-color: #5878e8;
  }

  .el-button--default {
    color: #8890b1;
    border-color: #e8eaf1;
  }

  /deep/.base_header_layout .grid-content.right .find.el-button--primary {
    width: 30px;
    margin-left: 0;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  /deep/.findValue .el-input__inner {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  //操作按钮
  .record,
  .adjustment {
    display: inline-block;
    color: #5878e8;
    padding: 0 4px !important;
    position: relative;
    font-size: 14px;
  }

  .record:after {
    position: absolute;
    content: '';
    display: block;
    top: 5px;
    right: -2px;
    width: 1px;
    height: 12px;
    background: #e9ecf7;
  }

  //状态样式
  .executory,
  .inExecution,
  .done {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1px;
    font-size: 14px;
  }

  .executory {
    background: #ff9f24;
  }

  .inExecution {
    background: #5878e8;
  }

  .done {
    background: #50cad4;
  }

  .putstorage.el-button--default,
  .deliverystorage.el-button--default {
    border-color: #8890b1;
    background-color: #fff;
    color: #8890b1;
  }

  /deep/.el-table td,
  /deep/.el-table th.is-leaf {
    border-right: 1px solid #e9ecf7;
    text-align: center;
  }

  /deep/.el-table tr td:first-child,
  /deep/.el-table tr th.is-leaf:first-child {
    border-left: 1px solid #e9ecf7;
  }

  .el-row {
    height: 60px;
  }

  .base_header_layout .grid-content {
    margin-top: 80px;
  }

  .el-input--small .el-input__inner {
    margin-left: 20px;
  }

  .el-range-editor--small.el-input__inner {
    height: 32px;
    margin: 0 10px;
  }

  /deep/.el-pagination {
    text-align: center;
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .el-select {
    width: 30%;
    margin-right: 10px;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .customer .el-form-item {
    border-bottom: 1px solid #ccc;
  }

  /deep/.typeselect .el-input__inner {
    color: #8890b1;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .shade {
    background: rgba(0, 0, 0, 0.1);
  }

  /deep/.base_header_layout .find.el-button--primary {
    width: 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  /deep/.base_header_layout .findinput input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
</style>