feat(四险社保提醒):

yubo

2025-09-24 3e414bd68b7b34b26c2135091b90e4fe5459d5c6

feat(四险社保提醒):

 src/views/remind/insurance5.vue

New file
@@ -0,0 +1,897 @@
<template>
  <div style="background-color: #fff;height: 100%;">
    <el-container>
      <el-header :height="headerHeight">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="3">
            <h3 class="bu-tian-jia-title">四险一档提醒</h3>
          </el-col>
          <el-col :span="18" style="margin-top: 15px;">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="80px">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="queryParams.sex" placeholder="请选择性别" style="width:100px">
                  <el-option
                    v-for="dict in sexOptions"
                    :key="dict.dicItemCode"
                    :label="dict.dicItemName"
                    :value="dict.dicItemCode"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="社保档位" prop="sex">
                <el-select v-model="queryParams.insuranceType" placeholder="请选择社保档位" style="width:180px">
                  <el-option
                    v-for="dict in searchInsuranceOptions"
                    :key="dict.dicItemCode"
                    :label="dict.dicItemName"
                    :value="dict.dicItemCode"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <span class="search-btn" @click="search">查询</span>
                <span class="search-btn" @click="resetQuery">重置</span>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="height: 85%;">
        <el-row style="margin: 10px 0 10px 0;">
          <el-col :span="24">
            <el-button type="danger" class="hr-but-all" @click="showDcyg(0)">导出EXCEL</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          :cell-style="{padding:'7px 0','text-align':'center'}"
          :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
          stripe
          border
          style="width: 100%;color: #000;"
          @sort-change="changeSort"
        >
          <el-table-column
            show-overflow-tooltip
            prop="empNumb"
            label="编号"
            width="80"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
          <el-table-column
            show-overflow-tooltip
            prop="allDeptName"
            label="部门（护卫点）"
            width="320"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
          <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="80" />
          <el-table-column
            show-overflow-tooltip
            prop="empName"
            label="姓名"
            width="100"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
          <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" />
          <el-table-column show-overflow-tooltip prop="sex" label="性别" width="60" :formatter="sexFormat" />
          <el-table-column
            show-overflow-tooltip
            prop="age"
            label="年龄"
            width="80"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
          <el-table-column
            show-overflow-tooltip
            prop="education"
            label="学历"
            width="80"
            :formatter="educationFormat"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
          <el-table-column
            show-overflow-tooltip
            prop="nativePlace"
            label="籍贯"
            width="70"
            :formatter="nativePlaceFormat"
          />
          <el-table-column show-overflow-tooltip prop="telePhone" label="联系电话" width="110" />
          <el-table-column show-overflow-tooltip prop="empType" label="员工类型" width="80" :formatter="empTypeFormat" />
          <el-table-column
            prop="insuranceType"
            label="社保档位"
            width="240"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
            :formatter="insuranceTypeFormat"
          />
        </el-table>
        <pagination
          v-show="total>0"
          style="text-align: right;width: 98%;"
          :total="total"
          :page.sync="pagination.num"
          :limit.sync="pagination.size"
          @pagination="search"
        />
      </el-main>
    </el-container>
    <el-dialog title="导出员工" :visible.sync="dialogShowDcyg" width="40%">
      <div style="font-size: 16px;font-weight: 400;height: 35px;margin-top: -30px;color: #409EFF;">
        请勾选需要导出的字段
      </div>
      <table id="dcygTable" width="100%">
        <tr>
          <td colspan="6" style="text-align: left;">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" />
            全部字段
          </td>
        </tr>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <tr>
            <td>档案号</td>
            <td>
              <el-checkbox label="archivesNumb"><span /></el-checkbox>
            </td>
            <td>姓名</td>
            <td>
              <el-checkbox label="empName"><span /></el-checkbox>
            </td>
            <td>性别</td>
            <td>
              <el-checkbox label="sexName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>部门(护卫点)</td>
            <td>
              <el-checkbox label="allDeptName"><span /></el-checkbox>
            </td>
            <td>所属岗位</td>
            <td>
              <el-checkbox label="jobName"><span /></el-checkbox>
            </td>
            <td>员工类别</td>
            <td>
              <el-checkbox label="empTypeName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>民族</td>
            <td>
              <el-checkbox label="nationName"><span /></el-checkbox>
            </td>
            <td>身份证号码</td>
            <td>
              <el-checkbox label="certificateNumb"><span /></el-checkbox>
            </td>
            <td>年龄</td>
            <td>
              <el-checkbox label="age"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>婚姻状况</td>
            <td>
              <el-checkbox label="marriageName"><span /></el-checkbox>
            </td>
            <td>身份证有效期</td>
            <td>
              <el-checkbox label="certificateValidity"><span /></el-checkbox>
            </td>
            <td>身高</td>
            <td>
              <el-checkbox label="stature"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>政治面貌</td>
            <td>
              <el-checkbox label="politicsName"><span /></el-checkbox>
            </td>
            <td>出生日期</td>
            <td>
              <el-checkbox label="birthdate"><span /></el-checkbox>
            </td>
            <td>学历</td>
            <td>
              <el-checkbox label="educationName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>籍贯</td>
            <td>
              <el-checkbox label="nativePlaceName"><span /></el-checkbox>
            </td>
            <td>户籍地址</td>
            <td>
              <el-checkbox label="censusAddress"><span /></el-checkbox>
            </td>
            <td>现住址</td>
            <td>
              <el-checkbox label="currentAddress"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>保安员证号</td>
            <td>
              <el-checkbox label="guardNumb"><span /></el-checkbox>
            </td>
            <td>保安员回执</td>
            <td>
              <el-checkbox label="returnReceipt"><span /></el-checkbox>
            </td>
            <td>档案情况</td>
            <td>
              <el-checkbox label="archivesStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>银行名称</td>
            <td>
              <el-checkbox label="bankName"><span /></el-checkbox>
            </td>
            <td>银行账号</td>
            <td>
              <el-checkbox label="bankNumb"><span /></el-checkbox>
            </td>
            <td>电话号码</td>
            <td>
              <el-checkbox label="telePhone"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>家庭成员及关系1</td>
            <td>
              <el-checkbox label="family"><span /></el-checkbox>
            </td>
            <td>员工状态</td>
            <td>
              <el-checkbox label="empStatusName"><span /></el-checkbox>
            </td>
            <td>离职日期</td>
            <td>
              <el-checkbox label="dimissionDate"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>入职日期</td>
            <td>
              <el-checkbox label="entryDate"><span /></el-checkbox>
            </td>
            <td>社保档位</td>
            <td>
              <el-checkbox label="insuranceTypeName"><span /></el-checkbox>
            </td>
            <td>社保电脑号</td>
            <td>
              <el-checkbox label="socialNumb"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>招聘介绍人</td>
            <td>
              <el-checkbox label="introducer"><span /></el-checkbox>
            </td>
            <td>入司工龄</td>
            <td>
              <el-checkbox label="seniority"><span /></el-checkbox>
            </td>
            <td>工作证</td>
            <td>
              <el-checkbox label="empCardStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>相关证件</td>
            <td>
              <el-checkbox label="certificateListName"><span /></el-checkbox>
            </td>
            <td>家庭成员及关系2</td>
            <td>
              <el-checkbox label="urgencyPhone"><span /></el-checkbox>
            </td>
            <td>员工手册</td>
            <td>
              <el-checkbox label="handbookStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>入职类型</td>
            <td>
              <el-checkbox label="entryTypeName"><span /></el-checkbox>
            </td>
            <td>离职类型</td>
            <td>
              <el-checkbox label="dimissionTypeName"><span /></el-checkbox>
            </td>
            <td>编号</td>
            <td>
              <el-checkbox label="empNumb"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>年假天数</td>
            <td>
              <el-checkbox label="annualLeave"><span /></el-checkbox>
            </td>
            <td />
            <td />
            <td />
            <td />
          </tr>
        </el-checkbox-group>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDcyg(1)">取 消</el-button>
        <el-button type="primary" @click="showDcyg(2)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { calculateSeniority, toCardGetUserInfo } from '@/utils/myUtil'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialog: {
        isVisible: false,
        title: '',
        type: ''
      },
      total: 0, // 总数量
      queryParams: {
        baseKey: '',
        insuranceType: '',
        sex: ''
      }, // 查询参数
      sort: {}, // 排序
      pagination: { // 分页参数
        size: 15,
        num: 1
      },
      headerHeight: '30px',
      dialogTableVisible: false,
      dialogShowDcyg: false,
      exportUrl: '',
      checkAll: false,
      isIndeterminate: false,
      cityOptions: ['archivesNumb', 'allDeptName', 'jobName', 'empName', 'certificateNumb', 'certificateValidity', 'sexName', 'nationName', 'age', 'marriageName', 'stature', 'birthdate', 'politicsName', 'empTypeName', 'educationName', 'nativePlaceName', 'censusAddress', 'currentAddress', 'guardNumb', 'returnReceipt', 'archivesStatusName', 'bankName', 'bankNumb', 'telePhone', 'entryDate', 'insuranceTypeName', 'socialNumb', 'introducer', 'seniority', 'empCardStatusName', 'certificateListName', 'urgencyPhone', 'handbookStatusName', 'family', 'empStatusName', 'dimissionDate', 'entryTypeName', 'dimissionTypeName', 'empNumb', 'annualLeave'],
      checkedCities: [],
      tableData: [],
      sexOptions: [],
      empStatusOptions: [],
      insuranceTypeOptions: [],
      searchInsuranceOptions: [{
        'dicItemName': '（非深户）四险一档',
        'dicItemCode': '7'
      }, {
        'dicItemName': '（非深户）四险二档',
        'dicItemCode': '6'
      }]
    }
  },
  mounted() {
    this.fetch()
    this.initDept()
    this.getDicts('ageStr').then(response => {
      this.ageStrOptions = response.data
    })
    this.getDicts('PLITICAL').then(response => {
      this.statusOptions = response.data
    })
    this.getDicts('sex').then(response => {
      this.sexOptions = response.data
    })
    this.getDicts('empStatus').then(response => {
      this.empStatusOptions = response.data
    })
    this.getDicts('empType').then(response => {
      this.empTypeOptions = response.data
    })
    this.getDicts('NATION').then(response => {
      this.nationOptions = response.data
    })
    this.getDicts('MARRIAGE').then(response => {
      this.marriageOptions = response.data
    })
    this.getDicts('EDUCATION').then(response => {
      this.educationOptions = response.data
    })
    this.getDicts('NATIVEPLACE').then(response => {
      this.nativePlaceOptions = response.data
    })
    this.getDicts('archivesStatus').then(response => {
      this.archivesStatusOptions = response.data
    })
    this.getDicts('INSURANCETYPE').then(response => {
      this.insuranceTypeOptions = response.data
    })
    this.getDicts('empCardStatus').then(response => {
      this.empCardStatusOptions = response.data
    })
    this.getDicts('handbookStatus').then(response => {
      this.handbookStatusOptions = response.data
    })
    this.getDicts('certificateList').then(response => {
      this.certificateListOptions = response.data
    })
    this.getDicts('PHYSICALEXAMTYPE').then(response => {
      this.physicalExamTypeOptions = response.data
    })
    this.getDicts('ECG').then(response => {
      this.ecgOptions = response.data
    })
    this.getDicts('CONTRACTSTATUS').then(response => {
      this.contractStatusOptions = response.data
    })
    this.getDicts('LEAVETYPE').then(response => {
      this.leaveTypeOptions = response.data
    })
    this.getDicts('applayStatus').then(response => {
      this.applayStatusOptions = response.data
    })
    this.getDicts('reportStatus').then(response => {
      this.reportStatusOptions = response.data
    })
    this.getDicts('hospitalizatioFlag').then(response => {
      this.hospitalizatioFlagOptions = response.data
    })
    this.getDicts('settleStatus').then(response => {
      this.settleStatusOptions = response.data
    })
    this.getDicts('ZCTYPE').then(response => {
      this.arbitrationTypeOptions = response.data
    })
    this.getDicts('changeType').then(response => {
      this.changeTypeOptions = response.data
    })
    this.getDicts('LZTYPE').then(response => {
      this.dimissionTypeOptions = response.data
    })
    // this.initJob()
  },
  methods: {
    exportExcel() {
      this.queryParams.baseKey = this.queryParams.vague
      this.queryParams.delFlag = 0
      this.queryParams.empStatus = 0
      var params = this.queryParams
      this.$download('hr/empBaseInfo/exportEmpAll', { ...params }, `基本信息_${new Date().getTime()}.xls`).then(() => {
        this.$message({
          message: '下载成功!',
          type: 'success'
        })
      })
    },
    editClose() {
      this.dialog.isVisible = false
    },
    // 翻页方法
    search() {
      this.queryParams.baseKey = ''
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.baseKey = ''
      this.queryParams.sex = ''
      this.queryParams.insuranceType = ''
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },

    fetch(params = {}) {
      var that = this
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      params.delFlag = 0
      params.empStatus = 0
      this.$get('hr/empBaseInfo/insurance/alert', {
        ...params
      }).then((r) => {
        const data = r.data.data
        that.total = data.total
        that.tableData = data.rows
      })
    },
    vagueSearch() {
      this.fetch({
        baseKey: this.queryParams.baseKey
      })
    },
    empStatusFormat(row, column) {
      return this.selectDictLabel(this.empStatusOptions, row.empStatus)
    },
    typeFormat(row, column) {
      return this.selectDictLabel(this.physicalExamTypeOptions, row.physicalExamType)
    },
    empTypeFormat(row, column) {
      return this.selectDictLabel(this.empTypeOptions, row.empType)
    },
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex)
    },
    educationFormat(row, column) {
      return this.selectDictLabel(this.educationOptions, row.education)
    },
    nativePlaceFormat(row, column) {
      return this.selectDictLabel(this.nativePlaceOptions, row.nativePlace)
    },
    insuranceTypeFormat(row, column) {
      return this.selectDictLabel(this.insuranceTypeOptions, row.insuranceType)
    },
    ecgNameFormat(row, column) {
      return this.selectDictLabel(this.ecgOptions, row.ecg)
    },
    contractStatusFormat(row, column) {
      return this.selectDictLabel(this.contractStatusOptions, row.contractStatus)
    },
    changeTypeFormat(row, column) {
      return this.selectDictLabel(this.changeTypeOptions, row.changeType)
    },
    leaveTypeFormat(row, column) {
      return this.selectDictLabel(this.leaveTypeOptions, row.leaveType)
    },
    dimissionTypeFormat(row, column) {
      return this.selectDictLabel(this.dimissionTypeOptions, row.dimissionType)
    },
    reportStatusFormat(row, column) {
      return this.selectDictLabel(this.reportStatusOptions, row.reportStatus)
    },
    applayStatusFormat(row, column) {
      return this.selectDictLabel(this.applayStatusOptions, row.applayStatus)
    },
    hospitalizatioFlagFormat(row, column) {
      return this.selectDictLabel(this.hospitalizatioFlagOptions, row.hospitalizatioFlag)
    },
    arbitrationTypeFormat(row, column) {
      return this.selectDictLabel(this.arbitrationTypeOptions, row.arbitrationType)
    },
    arbitrationStatusFormat(row, column) {
      return this.selectDictLabel(this.settleStatusOptions, row.arbitrationStatus)
    },
    initDept() {
      this.$get('system/dept').then((r) => {
        this.depts = r.data.data.rows
        this.deptTree = this.depts
      }).catch((error) => {
        console.error(error)
        this.$message({
          message: this.$t('tips.getDataFail'),
          type: 'error'
        })
      })
    },
    calculateSeniority(val) {
      this.empBaseInfoForm.seniority = calculateSeniority(val)
    },
    // 获取图片的Blob值
    getImageBlob(url, cb) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'blob'
      xhr.onload = function() {
        if (this.status === 200) {
          if (cb) cb(this.response)
        }
      }
      xhr.send()
    },
    preView(url) {
      var this_ = this
      const reader = new FileReader()
      this.getImageBlob(url, function(blob) {
        reader.readAsDataURL(blob)
      })
      reader.onload = function(e) {
        // 获取bolb里面数据时,生成预览
        var img = document.createElement('img')
        img.src = e.target.result
        this_.empBaseInfoForm.imagePath = e.target.result
      }
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.empBaseInfoImageUrl = URL.createObjectURL(file.raw) // 获取URL
      // 判断图片大小
      if (file.size < 4400000) {
        // 判断图片格式是否为jpg,png,jepg,gif
        var fileName = file.name
        // var suffixIndex=fileName.lastIndexOf(".")
        // var suffix=fileName.substring(suffixIndex+1).toUpperCase()
        var suffix = fileName.substring(fileName.lastIndexOf('.') + 1).toUpperCase()
        if (suffix === 'JPG' || suffix === 'PNG') {
          this.preView(this.empBaseInfoImageUrl)
        } else {
          this.$message.error('只能上传jpg/png文件，且不超过4MB,请重新上传！')
        }
      } else {
        this.$message.error('图片大小超过4M,请重新上传')
      }
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cityOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length
    },
    showDcyg(operate) {
      switch (operate) {
        case 0:
          this.dialogShowDcyg = true
          break
        case 1:
          this.dialogShowDcyg = false
          break
        case 2:
          var params = this.queryParams
          params.empStatus = '0'
          params.exportField = this.checkedCities.join(',')
          this.$download('hr/empBaseInfo/export/insurance', { ...params }, '社保四险员工列表.xls').then(() => {
            this.$message({
              message: '下载成功!',
              type: 'success'
            })
          })
          break
      }
    },
    editSuccess() {
      this.search()
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    placeNameSelect(item) {
      this.empBaseInfoForm.nativePlaceName = item.value
      this.empBaseInfoForm.nativePlace = item.code
    },
    querySearchJob(queryString, cb) {
      const restaurants = this.restaurJob
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    jobNameSelect(item) {
      this.empBaseInfoForm.jobName = item.value
      this.empBaseInfoForm.JobId = item.code

      this.ygdgForm.newJobName = item.value
      this.ygdgForm.jobId = item.code
    }, empDeptNameSelect(val) {
      this.empBaseInfoForm.deptId = val.id
      this.empBaseInfoForm.deptName = val.label
      this.empBaseInfoForm.allDeptName = val.allDeptName
    },
    generateUserInfo(index, val) {
      var userinfo = toCardGetUserInfo(val)
      if (userinfo === null) {
        return
      }
      this.empBaseInfoForm.age = userinfo.age
      this.empBaseInfoForm.birthdate = userinfo.birth
      this.empBaseInfoForm.sex = userinfo.sex
    },
    headers() {
      const token = getToken()
      if (token) {
        return {
          Authorization: 'bearer ' + token
        }
      } else {
        return null
      }
    },
    changeSort(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.search()
    }
  }
}
</script>
<style lang="scss">
.zzyg-table {
  .el-table th, .el-table td {
    padding: 7px 0;
  }
}

.fj-checkbox {
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #a32c30;;
    background: #a32c30;;
  }

  .el-checkbox__label {
    color: #000 !important;
  }
}
</style>
<style lang="scss" scoped>
.baseinfo .el-container {
  .el-aside {
    background-color: #fff;
  }

  .el-main {
    background-color: #fff;
  }

}

.el-main {
  height: 600px;
}

.el-autocomplete {
  width: 100%;
}

.el-select {
  width: 100%;
}

.el-aside {
  padding: 20px;
  background: #f3f5f8;
  height: 600px;

  .el-tree {
    height: 100%;
  }
}

.searchTable {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;

  tr {
    border-bottom: 1px dashed #d9dadb;
  }

  .td {
    width: 90px;
    text-align: right;
  }

  .td-group {
    padding-left: 20px;
  }
}

.searchTable td,
.searchTable th {
  color: #000;
  height: 50px;
  background-color: #fff;
}

#ygxq table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  margin-top: 20px;
}

#ygxq table td,
#ygxq table th {
  border: 1px solid #DDDCDC;
  color: #666;
  height: 30px;
}

#ygxq table thead th {
  background-color: #CCE8EB;
  width: 100px;
}

#ygxq table tr:nth-child(odd) {
  background: #fff;
}

#ygxq table tr:nth-child(even) {
  background: #F5FAFA;
}

.tdTitle {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.link_button {
  color: #169BD5;
}

.del_button {
  color: #D9001B;
}

#dcygTable {
  border-collapse: collapse;

  tr {
    width: 100%;
    border-bottom: 1px dashed #ccc;

    > td:nth-child(even) {
      width: 100px;
      text-align: left;
    }
  }

}

#dcygTable td {
  width: 160px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 400;
}

.search-btn {
  display: inline-block;
  width: 3.64vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  background-color: #a00515;
  color: #fff;
  margin-left: 1vw;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

.sup-search-btn {
  display: inline-block;
  width: 5.2vw;
  height: 3.2vh;
  line-height: 3.2vh;
  text-align: center;
  margin-left: 1vw;
  color: #a00515;
  border: 1px solid #a00515;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}
</style>