supplier_system/src/dashoo.cn/frontend_web/src/pages/index.vue

<template>
  <div style="overflow-y: auto">
    <el-card class="box-card">
      <div slot="header">
        <span>
          <i class="icon icon-table2"></i> 待办/已办
        </span>
        <el-form ref="form" :inline="true" style="float: right; margin-top: -10px">
          <el-form-item label="类型">
            <el-select size="mini" style="width:100px" v-model="searchForm.Type" placeholder="准入类别">
              <el-option label="全部" value=""></el-option>
              <el-option label="准入" value="1"></el-option>
              <el-option label="增项" value="2"></el-option>
              <el-option label="年审" value="3"></el-option>
              <el-option label="信息变更" value="4"></el-option>
              <el-option label="资质变更" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类别">
            <el-select size="mini" style="width:100px" v-model="searchForm.SupplierTypeCode" placeholder="准入类别">
              <el-option label="全部" value=""></el-option>
              <el-option label="物资类" value="01"></el-option>
              <el-option label="基建类" value="02"></el-option>
              <el-option label="技术服务类" value="03"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input size="mini" v-model="searchForm.SupplierName" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="handleSearch">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="待办任务" name="first">
          <el-table
          :data="entityListtode"
          size="mini"
          border
          :stripe="true"
          style="width: 100%">

          <!--<el-table-column type="index" label="序号"></el-table-column>-->

          <el-table-column label="待办类型" prop="Type" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.Type=='1'" style="color:#E6A23C">准入-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
              <span v-if="scope.row.Type=='2'" style="color:#E6A23C">增项-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
              <span v-if="scope.row.Type=='3'" style="color:#E6A23C">年审-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
              <span v-if="scope.row.Type=='4'" style="color:#E6A23C">信息变更-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
              <span v-if="scope.row.Type=='5'" style="color:#E6A23C">资质变更-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
              <span v-if="scope.row.Type=='6'" style="color:#E6A23C">企业注册-待审批</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="当前状态" prop="Status" align="center">-->
            <!--&lt;!&ndash;<template slot-scope="scope">&ndash;&gt;-->
              <!--&lt;!&ndash;{{statusStr(scope.row.Status, scope.row.Type)}}&ndash;&gt;-->
            <!--&lt;!&ndash;</template>&ndash;&gt;-->
          <!--</el-table-column>-->
          <el-table-column label="类别" prop="SupplierTypeCode" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.SupplierTypeCode=='01'">物资类</span>
              <span v-if="scope.row.SupplierTypeCode=='02'">基建类</span>
              <span v-if="scope.row.SupplierTypeCode=='03'">技术服务类</span>
            </template>
          </el-table-column>

          <el-table-column label="公司名称" prop="SupplierName" align="center"></el-table-column>

          <el-table-column label="执行人" prop="UserName" align="center"></el-table-column>

            <!--<el-table-column label="提交" prop="CreateTime">-->
              <!--<template slot-scope="scope">-->
                <!--{{ jstimehandle(timestampToTime(scope.row.CreateTime)) }}-->
              <!--</template>-->
            <!--</el-table-column>-->

          <el-table-column label="操作" width="130" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" title="办理"  icon="el-icon-edit" size="mini" @click="rowClick(scope.row)">办理</el-button>
              <!--<el-button type="text" title="编辑"  icon="el-icon-s-promotion" size="mini">跟踪</el-button>-->
            </template>
          </el-table-column>

        </el-table>
        </el-tab-pane>
        <el-tab-pane label="已办任务" name="second">
          <el-table
            :data="entityListdone"
            size="mini"
            border
            :stripe="true"
            style="width: 100%">

            <el-table-column label="已办类型" prop="Type">
              <template slot-scope="scope">
                <span v-if="scope.row.Type=='1'" style="color:#E6A23C">准入-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
                <span v-if="scope.row.Type=='2'" style="color:#E6A23C">增项-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
                <span v-if="scope.row.Type=='3'" style="color:#E6A23C">年审-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
                <span v-if="scope.row.Type=='4'" style="color:#E6A23C">信息变更-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
                <span v-if="scope.row.Type=='5'" style="color:#E6A23C">资质变更-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
                <span v-if="scope.row.Type=='6'" style="color:#E6A23C">企业注册-{{statusStr(scope.row.Status, scope.row.Type)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="类别" prop="SupplierTypeCode">
              <template slot-scope="scope">
                <span v-if="scope.row.SupplierTypeCode=='01'">物资类</span>
                <span v-if="scope.row.SupplierTypeCode=='02'">基建类</span>
                <span v-if="scope.row.SupplierTypeCode=='03'">技术服务类</span>
              </template>
            </el-table-column>

            <el-table-column label="公司名称" prop="SupplierName"></el-table-column>

            <el-table-column label="执行人" prop="UserName"></el-table-column>
            <!--<el-table-column label="提交" prop="CreateTime">-->
              <!--<template slot-scope="scope">-->
                <!--{{ jstimehandle(timestampToTime(scope.row.CreateTime)) }}-->
              <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="操作" width="130" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" title="打开"  icon="el-icon-edit" size="mini" @click="rowClick(scope.row)">打开</el-button>
                <!--<el-button type="text" title="编辑"  icon="el-icon-s-promotion" size="mini">跟踪</el-button>-->
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-card>
    <!-- 公司审核信息 -->
    <el-dialog title="企业注册信息" :visible.sync="dialogVisible">
      <el-form label-width="135px" ref="formData" :model="formData" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司名称" label-width="150px" style="width: 100%" prop="SupplierName">
              <el-input v-model="formData.SupplierName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="统一社会信用代码" label-width="150px" style="width: 100%" prop="CommercialNo">
              <el-input v-model="formData.CommercialNo" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="法定代表人姓名" label-width="150px" style="width: 100%" prop="LegalPerson">
              <el-input v-model="formData.LegalPerson" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="法定代表人身份证号" label-width="150px" style="width: 100%" prop="LegalPersonId">
              <el-input v-model="formData.LegalPersonId"  readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="法定代表人身份证扫描件" label-width="170px" prop="LegalPersonImg">
              <div class="block" style="overflow: auto;">
                <template>
                  <el-row>
                    <el-col :span="12" v-for="(url, index) in urlList" :key="index">
                      <span @click="bigImg(url)">
                        <el-image  style="width: 170px; height: 100px; cursor: pointer" :src="url"></el-image>
                      </span>
                    </el-col>
                  </el-row>
                </template>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人姓名" label-width="150px" style="width: 100%" prop="ContactName">
              <el-input v-model="formData.ContactName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人身份证号" label-width="150px" style="width: 100%" prop="ContactId">
              <el-input v-model="formData.ContactId" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人身份证扫描件" label-width="170px" prop="ContactImg">
              <div class="block" style="overflow: auto;">
                <template>
                  <el-row>
                    <el-col :span="12" v-for="(url, index) in urlList2" :key="index">
                      <span @click="bigImg(url)">
                        <el-image style="width: 170px; height: 100px; cursor: pointer" :src="url"></el-image>
                      </span>
                    </el-col>
                  </el-row>
                </template>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱" label-width="150px" style="width: 100%" prop="EMail">
              <el-input v-model="formData.EMail" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号"   style="width: 100%" prop="UserTelephone">
              <el-input v-model="formData.UserTelephone" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名"  label-width="150px" style="width: 100%" prop="UserName">
              <el-input v-model="formData.UserName" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-row style="margin-left: 35%; margin-top: 10px; margin-bottom: 20px;">-->
          <!--<el-button size="mini" @click="cancelOption" v-if="formData.CheckStatus==0">审核未通过</el-button>-->
          <!--<el-button size="mini" type="primary" @click="ensureOption" style="margin-left: 20%;" v-if="formData.CheckStatus==0">审核通过</el-button>-->
        <!--</el-row>-->
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: -25px">
        <el-button  type="primary" size="mini" @click="ComAudit" v-if="formData.CheckStatus == 0">审核</el-button>
      </div>
    </el-dialog>
    <el-dialog title="审核" :visible.sync="Auditshow">
      <el-form :model="shenheForm" label-width="100px" ref="shenheForm">
        <el-form-item label="审核状态">
          <template>
            <el-radio class="radio" v-model="shenheForm.SuccessStatus" :label="1">通过</el-radio>
            <el-radio class="radio" v-model="shenheForm.SuccessStatus" :label="2">未通过</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="意见" :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]">
          <el-input type="textarea" v-model="shenheForm.AuditorRemark" placeholder="请输入审核说明"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: -25px">
        <el-button size="small" @click="Auditshow = false">取 消</el-button>
        <el-button type="primary" size="small" @click="makeSure()">确 定</el-button>
      </div>
    </el-dialog>

    <!--点击图片放大区域-->
    <el-dialog
      title="法定代表人身份证扫描件"
      :visible.sync="legalPersonImgVisible"
      width="40%">
      <el-image :src="bigUrl"></el-image>
    </el-dialog>
  </div>
</template>

<script>
  import api from '@/api/oilsupplier/supplier'

  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'index',

    computed: mapGetters({
      authUser: 'authUser'
    }),

    data () {
      return {
        urlList: [], // 照片地址数组
        urlList2: [], // 照片地址数组2
        bigUrl: '',
        Auditshow: false,
        dialogVisible: false,
        legalPersonImgVisible: false,
        tabindex: '',
        activeName: 'first',
        currentDate: new Date(),
        // 查询时间
        CreateOn: [],
        // 分页参数
        size: 10,
        currentPage: 1,
        currentItemCount: 0,
        shenheForm: {
          SuccessStatus: 1,
          AuditorRemark: ''
        },
        // 列表排序
        Column: {
          Order: '',
          Prop: ''
        },
        // 查询项
        searchForm: {
          Id: '',
          Type: '',
          SupplierTypeCode: '',
          SupplierName: '',
          IsPay: '1',
          CreateOn: '',
          CreateUserId: '',
          CreateBy: '',
          ModifiedOn: '',
          ModifiedUserId: '',
          ModifiedBy: ''

        },
        formData: {
          Id: '', // int
          UserId: '', // int
          UserName: '', // 账号/Email
          UserRealName: '', // 用户真实姓名
          UserTelephone: '', // 用户手机号
          UserPass: '',
          UserPass2: '',
          SupplierName: '',
          OilCertificateNo: '',
          Grade: '',
          MgrUnit: '',
          OperType: '',
          Country: '',
          CommercialNo: '',
          OrganCode: '',
          CountryTaxNo: '',
          LocalTaxNo: '',
          Address: '',
          DetailAddress: '',
          Province: '',
          City: '',
          Street: '',
          HouseNo: '',
          ZipCode: '',
          BusinessScope: '',
          LegalPerson: '',
          LegalPersonId: '',
          LegalPersonURL: '',
          CategoryCode: '',
          CategoryName: '',
          RegCapital: 0, //float32
          Currency: '',
          ContactName: '',
          ContactId: '',
          ContactURL: '',
          CompanyType: '',
          SetupTime: '', //time
          DepositBank: '',
          BankAccount: '',
          EMail: '',
          BankCreditRating: '',
          Mobile: '',
          Telphone: '',
          Fax: '',
          CompanyTel: '',
          QQ: '',
          CompanyUrl: '',
          Remark: '',
          CheckStatus: 0, // 二级单位审核状态，0：未通过，1：通过 默认0
          IsDelete: 0, // 删除状态，0正常，1已删除
          LinkAddress: '',
          LinkProvince: '',
          LinkCity: '',
          LinkStreet: '',
          LinkHouseNo: '',
          LinkZipCode: '',
          HseTraining: ''
        },
        entityListtode: [],
        entityListdone: []
      }
    },
    created () {
      if(this.authUser.Profile.IsCompanyUser==1){
         this.$router.push('/oilsupplier/supplier') //跳转到登录页
      }
      this.initDatas()
    },
    methods: {
      initDatas () {
        // 分页及列表条件
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          Order: this.Column.Order,
          Prop: this.Column.Prop,
          Statustype: 2
        }
        let myCreateOn = []
        // 解析时间
        if (this.CreateOn.length === 2) {
          this.CreateOn[1].setHours(23)
          this.CreateOn[1].setMinutes(59)
          this.CreateOn[1].setSeconds(59)
          myCreateOn.push(this.formatDateTime(this.CreateOn[0]))
          myCreateOn.push(this.formatDateTime(this.CreateOn[1]))
        }
        // 查询条件
        Object.assign(params, this.searchForm)
        // 访问接口
        api.getTodoList(params, this.$axios).then(res => {
          this.entityListtode = res.data.items
          this.currentItemCount = res.data.currentItemCount
        }).catch(err => {
          console.error(err)
        })
      },
      handleSearch () {
        this.currentPage = 1
        if (this.tabindex === '0') {
          this.initDatas()
        } else {
          this.finishedData()
        }
        this.initDatas()
      },
      handleClick (tab) {
        this.tabindex = tab.index
        if (tab.index === '0') {
          this.initDatas()
        } else {
          this.finishedData()
        }
      },
      rowClick (val) {
        let SupplierType = ''
        if (val.Type === '1') {
          if (val.SupplierTypeCode === '01') {
            SupplierType = 'goodsedit'
          } else if (val.SupplierTypeCode === '02') {
            SupplierType = 'basisedit'
          } else {
            SupplierType = 'techedit'
          }
          this.$router.push('oilsupplier/supplieraudit/' + val.Id + '/' + SupplierType + '?certid=' + val.CertId)
        } else if (val.Type === '2') {
          if (val.SupplierTypeCode === '01') {
            SupplierType = 'goodsdataopera'
          } else if (val.SupplierTypeCode === '02') {
            SupplierType = 'basisdataopera'
          } else {
            SupplierType = 'techdataopera'
          }
          this.$router.push('oilsupplier/addtionaudit/' + val.Id + '/' + SupplierType)
        } else if (val.Type === '3') {
          this.$router.push('oilsupplier/annualaudit/' + val.SupplierId + '/auditoperation?certid=' + val.CertId + '&WorkflowId=' + val.WorkflowId + '&AnnualStatus=' + val.Status + '&annualId=' + val.Id + '&Step=' + val.Step)
          // /oilsupplier/annualaudit/' + scope.row.SupplierId + '/auditoperation?certid=' + scope.row.CerId +'&WorkflowId='+scope.row.WorkflowId+'&AnnualStatus='+scope.row.Status+'&annualId='+scope.row.Id+'&Step='+scope.row.Step
        } else if (val.Type === '4') {
          this.$router.push('/oilsupplier/infochangech/' + val.Id + '/auditoperation?InfoStatus='+ val.Status+'&SupId='+val.SupplierId)
        } else if (val.Type === '5') {
          this.$router.push('oilsupplier/qualchange/' + val.SupplierId + '/auditoperation?certid=' + val.CertId + '&QualId=' + val.Id + '&QualStatus=' + val.Status)
        } else if (val.Type === '6') {
          this.initDataregister(val.Id)
        }
      },
      bigImg (url) {
        this.bigUrl = url
        this.legalPersonImgVisible = true
      },
      initDataregister (Id) {
        let _this = this
        const params = {
          _currentPage: _this.currentPage,
          _size: _this.size,
          Name: _this.searchForm.SupplierName
        }
        this.$axios.get("/register/get/" + Id)
          .then(function (response) {
            _this.formData = response.data
            _this.dialogVisible = true
            // 处理URL
            _this.urlList = []
            let urlArr = _this.formData.LegalPersonURL.split('&')
            if (urlArr) {
              for (let i = 0; i < urlArr.length; i++) {
                let tempURL = urlArr[i].split('|')
                if (tempURL[0].indexOf('/upfile') === 0) {
                  const myDomain = window.location.host
                  _this.urlList.push('http://' + myDomain + tempURL[0])
                } else {
                  _this.urlList.push('http://' + tempURL[0])
                }
              }
            }
            _this.urlList2 = []
            let urlArr2 = _this.formData.ContactURL.split('&')
            if (urlArr2) {
              for (let i = 0; i < urlArr2.length; i++) {
                let tempURL = urlArr2[i].split('|')
                if (tempURL[0].indexOf('/upfile') === 0) {
                  const myDomain = window.location.host
                  _this.urlList2.push('http://' + myDomain + tempURL[0])
                } else {
                  _this.urlList2.push('http://' + tempURL[0])
                }
              }
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      ComAudit () {
        this.Auditshow = true
      },
      // 审核
      makeSure () {
        if (this.shenheForm.AuditorRemark.trim().length < 1) {
          this.$message({
            type: 'warning',
            message: '请填写审批意见！'
          })
          return
        }
        this.checkstatus()
      },
      // 审核未通过
      checkstatus () {
        let _this = this
        const params = _this.shenheForm
        _this.$axios.post('/register/comaudit/', _this.formData, {params})
          .then(res => {
            if (res.data.code === 0) {
              _this.$message({
                type: 'success',
                message: res.data.message,
              })
              // 关闭dialog
              _this.Auditshow = false
              _this.dialogVisible = false
              // 更新列表
              _this.initDatas()
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
          .catch(err => {
            console.error(err)
          })
      },
      ensureOption() {
        let _this = this
        _this.$axios.post('/register/adduser/', _this.formData)
          .then(res => {
            if (res.data.code === 0) {
              _this.$message({
                type: 'success',
                message: res.data.message,
              })
              // 关闭dialog
              _this.dialogVisible = false
              // 更新列表
              this.initDatas()
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
          .catch(err => {
            console.error(err)
          })
      },

      finishedData () {
        // 分页及列表条件
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          Order: this.Column.Order,
          Prop: this.Column.Prop,
          Statustype: 2
        }
        let myCreateOn = []
        // 解析时间
        if (this.CreateOn.length === 2) {
          this.CreateOn[1].setHours(23)
          this.CreateOn[1].setMinutes(59)
          this.CreateOn[1].setSeconds(59)
          myCreateOn.push(this.formatDateTime(this.CreateOn[0]))
          myCreateOn.push(this.formatDateTime(this.CreateOn[1]))
        }
        // 查询条件
        Object.assign(params, this.searchForm)
        api.getMyTaskFinished(params, this.$axios).then(res => {
          this.entityListdone = res.data.items
          this.currentItemCount = res.data.currentItemCount
        }).catch(err => {
          console.error(err)
        })
      },
      statusStr (val, type) {
        switch (val) {
          case 1:
            return '审核通过'
          case 2:
            return '审核未通过'
          case '':
            return '待提交'
          case '0':
            return '待提交'
          case '1':
            if (type == '6') {
              return '审核通过'
            } else {
              return '待初审'
            }
          case '-1':
            return '初审未通过'
          case '2':
            if (type == '6') {
              return '审核未通过'
            } else {
              return '待复审'
            }
          case '-2':
            return '复审未通过'
          case '3':
            return '待专业处室分办'
          case '4':
            return '待专业处室审批'
          case '-4':
            return '专业处室审批未通过'
          case '5':
            if (type == '4' || type == '5') {
              return '待企业法规处审批'
            } else {
              return '待集中评审'
            }
          case '-5':
            if (type == '4' || type == '5') {
              return '企业法规处审批未通过'
            } else {
              return '集中评审未通过'
            }
          case '6':
            return '待缴费'
          case '7':
            return '待入库'
          case '8':
            return '已入库'
          case '9':
            return '未通过'
          case '10':
            return '分办'
          default:
            return val
        }
      },
      timestampToTime (val) {
        var date = new Date(val) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y + M + D + h + m + s
      },
      jstimehandle (val) {
        if (val === '') {
          return '----'
        } else if (val === '0001-01-01T08:00:00+08:00') {
          return '----'
        } else if (val === '5000-01-01T23:59:59+08:00') {
          return '永久'
        } else if (val === '1970-01-01 8:0:0') {
          return '----'
        } else if (val === '1970-01-1 8:0:0') {
          return '----'
        } else {
          val = val.replace('T', ' ')
          return val.substring(0, 19)
        }
      },
      handleCurrentChange (value) {
        this.currentPage = value
        this.initData()
      },
      handleSizeChange (value) {
        this.size = value
        this.currentPage = 1
        this.initData()
      }
    }
  }
</script>