yiliangyiyun-pc-jj/src/views/warehouse/warehouseManagementEdit.vue

//编辑仓库
<template>
  <div class="container">
    <el-row>
      <el-col :span="20">
        <h2 class="bg-left title">修改仓库信息</h2>
      </el-col>
      <el-col :span="4" class="bg-right">
        <el-button class="bg-bottom" type="primary" size="small" @click="returnWarehouse()">返回</el-button>
      </el-col>
    </el-row>
    <div>
      <ws-form ref="deptBudgetList" :model="deptBudgetList">
        <el-radio-group v-model="warehouseType" @change="warehouseTypechange">
          <el-radio label="1">常用仓库</el-radio>
          <el-radio label="2">临时仓库</el-radio>
        </el-radio-group>
        <div class="small-title">基本信息</div>
        <!--基本信息-->
        <ws-info-table>
          <!--仓库名称-->
          <ws-form-item label="仓库名称" span="1" prop="warehouseName" class="readonly">
            <ws-select v-model="deptBudgetList.warehouseName" placeholder="" class="typeselect"
              @change="selectpackingMethod">
              <ws-option v-for="item in packtypeList" :key="item.constKey" :label="item.warehouseName"
                :value="item.warehouseName" />
            </ws-select>
          </ws-form-item>
          <!--负责人-->
          <ws-form-item label="负责人" span="1" prop="personCharge">
            <el-select v-model="deptBudgetList.personCharge" placeholder="请选择负责人" filterable clearable
              @change="selectstaff">
              <el-option v-for="item in options" :key="item.value" :label="item.staffName" :value="item.staffName" />
            </el-select>
          </ws-form-item>
          <!--负责人电话-->
          <ws-form-item label="负责人电话" span="1" prop="personPhone" class="readonly">
            <ws-input :readonly="true" v-model="deptBudgetList.personPhone" placeholder="请输入负责人电话" maxlength="100"
              size="small" />
          </ws-form-item>
          <!--其他负责人-->
          <ws-form-item label="其他负责人" v-if="warehouseType == 1" span="1" prop="otherPersonCharge">
            <el-select v-model="deptBudgetList.otherPersonPhone" placeholder="请选择其他负责人" @change="selectstaffOther"
              :filter-method="dataFilter1" filterable multiple>
              <el-option v-for="item in optionsOther" :key="item.staffMobilePhone" :label="item.staffName"
                :value="item.staffMobilePhone " />
            </el-select>
          </ws-form-item>
          <!--仓库所在地-->
          <ws-form-item label="仓库所在地" span="1" prop="warehouseCity">
            <el-cascader :options="options_" v-model="selectedOptions" clearable size="large" placeholder="请输入仓库所在地"
              style="width: 200%" @change="handleChange" />
          </ws-form-item>
          <!--详细地址-->
          <ws-form-item label="详细地址" span="1" prop="detailedAddress" class="readonly">
            <ws-input v-model="deptBudgetList.detailedAddress" placeholder="请输入详细地址" maxlength="100" size="small" />
          </ws-form-item>
          <!--总储量（吨)-->
          <ws-form-item v-if="warehouseType == 1" label="总储量（吨)" span="1" prop="totalStorage">
            {{ totalStorage }}
          </ws-form-item>
        </ws-info-table>
        <div v-for="(item, index) in deptBudgetList.warehousePositionInfoList">
          <ws-info-table>
            <!--仓位编号-->
            <ws-form-item label="仓位编号" span="1" prop="binNumber">
              <ws-input v-model.number="item.binNumber" placeholder="请输入仓位编号" maxlength="100" size="small" />
            </ws-form-item>
            <!--仓位储量（吨）-->
            <ws-form-item label="仓位储量（吨）" span="1" prop="maxStorage">
              <ws-input v-model="item.maxStorage" placeholder="请输入仓位储量（吨）" maxlength="20" size="small" />
            </ws-form-item>
            <!--备注（选填）-->
            <ws-form-item label="备注（选填）" span="1" prop=" remark">
              <ws-input v-model="item.remark" placeholder="请输入备注" maxlength="100" size="small" />
            </ws-form-item>
            <img width="22" height="22" class="add" @click="add" src="../../../public/img/add.png" alt="" />
            <img width="22" height="22" class="del" @click="del(index, item)" src="../../../public/img/del.png"
              alt="" />
          </ws-info-table>
        </div>
      </ws-form>
      <ws-form ref="deptBudgetList" :model="deptBudgetList">
        <div v-if="warehouseType == 1" class="small-title">上传仓库照片</div>
        <el-upload action="https://www.zthymaoyi.com/upload/admin" :show-file-list="false" :on-success="
            (res, file) => {
              uploadSuccessHandle(res)
            }
          " :on-remove="
            (value) => {
              handleRemove(value)
            }
          " class="avatar-uploader" accept=".jpg, .jpeg, .png, .gif">
          <el-button v-if="warehouseType == 1">上传附件</el-button>
        </el-upload>
        <div class="addressUrls" v-if="addressUrls != null">
          <div class='addressUrls-item'>
            <div v-for="(item , index) in addressUrls" class="addressUrl" :key="index">
              <div @click='close(index)' class="iconfont icon-guanbi"></div>
              <img v-if="addressUrls != null" width="100" height="100" :src="item" alt="" />
            </div>


          </div>
        </div>
        <div class="small-title">仓库定位</div>
        <map-drag @marker="marker" :isShowaddress='false' v-on:addressListen='getAddress'
          v-on:pickedAddress='searchAddress'></map-drag>
      </ws-form>

      <!-- <ws-button @click="exportlist()"></ws-button> -->
    </div>
    <div style="text-align: right; padding: 10px">
      <el-button class="bg-bottom-up" type="primary" size="small" @click="submit()">修改</el-button>
    </div>
  </div>
</template>
<script>
  import {
    getFileList,
    saveFiles
  } from '@/model/upload'
  import {
    getstafffind,
  } from '@/model/contarct/index'
  import {
    xiala,
    billoperatehis,
    getLook,
    edit,
    delPosition
  } from '@/model/warehouse/index'
  import {
    regionData,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  import {
    downloadFile
  } from '@/utils/batchDown'
  import Pagination from '@/components/Pagination'
  import WsUpload from '@/components/WsUpload'
  import mapDrag from '@/components/mapdrag/mapdrag'
  import {
    dayjs,
    fmoney,
    EventBus
  } from 'base-core-lib'
  export default {
    name: 'viewSpareMoney',
    components: {
      WsUpload,
      Pagination,
      mapDrag,
    },
    watch: {
      vesselId(val) {
        this.getList()
      },
      isShow(val) {
        this.showType = val
      },
    },
    data() {
      return {
        fileList: [],
        //弹出框
        dialogViewSpareMoney: false,
        dialogApproveFormVisible: false,
        // 船舶类型
        monetaryKey: null,
        // 表格显示数据
        tableDate: [],
        // 是否显示
        showType: true,
        // 年
        year: '',
        deptBudgetTotal: 0,
        currentPage: 1,
        pageSize: 10,
        searchType: 1,
        searchKeyWord: '',
        contractType: 2,
        startDate: null,
        endDate: null,
        warehouseType: '1',
        unitList: [],
        baseId: '',
        // 提交类型
        submitType: true,
        size: 10,
        options_: regionData,
        selectedOptions: [],
        compId: sessionStorage.getItem('ws-pf_compId'),
        deptCircularPage: {},
        packtypeList: [],
        date: {
          year: dayjs().format('YYYY'),
          month: dayjs().format('MM'),
        },
        staffList: [],
        contractList: [],
        deptBudgetList: {},
        historyList: [],
        appendixIdsAdd: '',
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          },
        },
        options: [],
        staffList1: [],
        optionsOther: [],
        value: '',
        accessoryTFs: false,
        addressUrls: [],
      }
    },
    activated() {
      this.loaddata()
      getstafffind({
          roles: 'd6a5c8a52da544309259f91f75de1ec6'
        })
        .toPromise()
        .then((response) => {
          this.options = response
          this.optionsOther = response
          this.staffList1 = response
          this.staffList = response
        })
      this.showType = this.isShow
    },
    computed: {
      totalStorage: function() {
        var sum = 0
        if (this.deptBudgetList.warehousePositionInfoList) {
          for (
            var i = 0; i < this.deptBudgetList.warehousePositionInfoList.length; i++
          ) {
            sum += Number(
              this.deptBudgetList.warehousePositionInfoList[i].maxStorage
            )
          }
        }
        return sum
      },
    },
    methods: {
      getAddress(data) {
        console.log("getAddress", data)
        this.deptBudgetList.warehousePrivate = data[0]
        this.deptBudgetList.warehouseCity = data[1]
        this.deptBudgetList.warehouseArea = data[2]
      },
      searchAddress(e) {
        this.deptBudgetList.warehousePositioning = e.lat + ',' + e.lng
      },
      selectstaffOther(e) {
        this.deptBudgetList.otherPersonCharge = ''
        for (var i = 0; i < this.optionsOther.length; i++) {
          for (var j = 0; j < e.length; j++) {
            if (this.optionsOther[i].staffMobilePhone == e[j]) {
              this.deptBudgetList.otherPersonCharge += this.optionsOther[i].staffName + ' ' + this.optionsOther[i]
                .staffMobilePhone + ','
            }
          }
        }
      },
      close(index) {
        this.addressUrls.splice(index, 1)
      },
      dataFilter(val) {
        this.deptBudgetList.personCharge = val
        if (val) {
          //val存在
          this.options = this.staffList.filter((item) => {
            if (
              !!~item.staffName.indexOf(val) ||
              !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
            ) {
              return true
            }
          })
        } else {
          //val为空时，还原数组
          this.options = this.staffList
        }
      },
      dataFilter1(val) {
        this.deptBudgetList.personCharge = val
        if (val) {
          //val存在
          this.optionsOther = this.staffList1.filter((item) => {
            if (
              !!~item.staffName.indexOf(val) ||
              !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
            ) {
              return true
            }
          })
        } else {
          //val为空时，还原数组
          this.optionsOther = this.staffList1
        }
      },
      selectstaff(e) {
        for (var i = 0; i < this.staffList.length; i++) {
          if (this.staffList[i].staffName == e) {
            this.deptBudgetList.personPhone = this.staffList[i].staffMobilePhone
            this.deptBudgetList.personChargeKey = this.staffList[i].staffId
          }
        }
      },
      //返回按钮
      returnWarehouse() {
        this.addressUrls = []
        this.deptBudgetList = {}
        this.selectedOptions = []
        this.$router.push({
          path: 'warehouseManagementList'
        })
      },
      handleChange(value) {
        this.selectedOptions = value
      },
      warehouseTypechange() {
        this.addressUrls = []
        this.deptBudgetList = {}
        this.selectedOptions = []
        this.loaddata()
      },
      marker: function(item) {
        this.deptBudgetList.warehousePositioning =
          item.lnglat.lat + ',' + item.lnglat.lng
      },
      selectedAddress(e) {
        this.deptBudgetList.warehousePositioning =
          e.center.lat + ',' + e.center.lng
      },
      uploadSuccess(data, files, url) {
        this.fileList = files
        console.log('uploadSuccess ', data, files, url)
      },
      onChange(files) {
        this.fileNum = files
        this.$refs.upload.handleSaveBill().then((res) => {
          console.log(files)
        })
      },
      handleClose() {
        this.accessoryTFs = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      selectpackingMethod(e) {
        for (var i = 0; i < this.packtypeList.length; i++) {
          if (this.packtypeList[i].warehouseName == e) {
            this.baseId = this.packtypeList[i].id
            this.getLook(this.packtypeList[i].id)
          }
        }
      },
      add() {
        this.deptBudgetList.warehousePositionInfoList.push({
          binNumber: '',
          maxStorage: '',
          remark: '',
        })
      },
      del(index, item) {
        if (item.nowStorage > 0) {
          this.$message.warning('尚有剩余库存，不可删除')
        } else {
          this.$confirm(`此操作将永久删除该仓位的全部信息，是否确定删除`, {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
            .then(() => {
              if (item.id) {
                delPosition({
                    id: item.id
                  })
                  .toPromise()
                  .then((response) => {
                    this.$message.success('删除成功')
                  })
                  .catch((response) => {
                    EventBus.$emit(
                      'error',
                      this.$t('showMessage.asteriskRequired')
                    )
                  })
              }
              if (this.deptBudgetList.warehousePositionInfoList.length > 1) {
                this.deptBudgetList.warehousePositionInfoList.splice(index, 1)
              }
            })
            .catch(() => {
              return false
            })
        }
      },
      loaddata() {
        // 仓库名称
        xiala({
            compId: sessionStorage.getItem('ws-pf_compId'),
            warehouseType: this.warehouseType,
          })
          .toPromise()
          .then((response) => {
            this.packtypeList = response
          })
      },
      getUnitList() {
        xiala({
            compId: sessionStorage.getItem('ws-pf_compId'),
            constCode: 'TYPEYAN',
          })
          .toPromise()
          .then((response) => {
            this.unitList = response
            let currItem
            this.unitList.forEach((item, index, arr) => {
              item.flag = 'delete'
              if (this.vModel == item.constKey) {
                currItem = item
                this.getLook(currItem.compId)
              }
            })
            //
            if (currItem) {
              this.getLook(currItem.compId)
            }
          })
      },
      getLook(compId1) {
        getLook({
            id: compId1,
          })
          .toPromise()
          .then((response) => {
            var tmp = []
            tmp[0] = TextToCode[response.warehousePrivate].code
            tmp[1] =
              TextToCode[response.warehousePrivate][response.warehouseCity].code
            tmp[2] =
              TextToCode[response.warehousePrivate][response.warehouseCity][
                response.warehouseArea
              ].code
            this.selectedOptions = tmp
            this.deptBudgetList = response
            // if(this.deptBudgetList.addressUrl){
            //   this.fileList =  this._getFileList(this.deptBudgetList.addressUrl)
            // }
            this.addressUrls = this.deptBudgetList.addressUrl.split(',')
            this.deptBudgetList.otherPersonPhone = this.deptBudgetList.otherPersonPhone.split(',')
            this.addressUrls.pop()
          })
      },
      // 传入appendixIds 从服务器获取文件列表信息
      _getFileList(appendixIds) {
        return new Promise(async (next) => {
          try {
            next((await getFileList({
              appendixIds
            }).toPromise()) || [])
          } catch (error) {
            next()
          }
        })
      },
      uploadSuccessHandle(e) {
        this.deptBudgetList.addressUrl += e.url + ','
        this.addressUrls.push(e.url)
      },
      //提交
      submit() {
        if (!this.deptBudgetList.warehouseName) {
          this.$message({
            message: '仓库名称不能为空！',
            type: 'warning',
          })
          return
        }
        if (
          this.deptBudgetList.warehouseName.length < 2 ||
          this.deptBudgetList.warehouseName.length > 20
        ) {
          this.$message({
            message: '仓库名长度不符合要求！',
            type: 'warning',
          })
          return
        }
        if (!this.deptBudgetList.personCharge) {
          this.$message({
            message: '负责人不能为空！',
            type: 'warning',
          })
          return
        }
        if (
          this.deptBudgetList.personCharge.length < 2 ||
          this.deptBudgetList.personCharge.length > 10
        ) {
          this.$message({
            message: '负责人长度不符合要求，请控制在2-10字符之内',
            type: 'warning',
          })
          return
        }
        if (!this.deptBudgetList.personPhone) {
          this.$message({
            message: '负责人电话不能为空！',
            type: 'warning',
          })
          return
        }
        if (this.deptBudgetList.personPhone.length != 11) {
          this.$message({
            message: '手机号输入有误！',
            type: 'warning',
          })
          return
        }
        if (!this.deptBudgetList.detailedAddress) {
          this.$message({
            message: '详细地址不能为空！',
            type: 'warning',
          })
          return
        }
        if (this.warehouseType == 1) {
          if (this.totalStorage <= 0) {
            this.$message({
              message: '仓位储量不能为空！',
              type: 'warning',
            })
            return
          }
        }

        if (
          this.deptBudgetList.detailedAddress.length < 2 ||
          this.deptBudgetList.detailedAddress.length > 20
        ) {
          this.$message({
            message: '详细地址长度不符合要求，请控制在2-20字符之内',
            type: 'warning',
          })
          return
        }
        for (
          var i = 0; i < this.deptBudgetList.warehousePositionInfoList.length; i++
        ) {
          for (
            var j = i + 1; j < this.deptBudgetList.warehousePositionInfoList.length; j++
          ) {
            console.log(
              this.deptBudgetList.warehousePositionInfoList[i].binNumber,
              this.deptBudgetList.warehousePositionInfoList[j].binNumber
            )
            if (
              this.deptBudgetList.warehousePositionInfoList[i].binNumber ==
              this.deptBudgetList.warehousePositionInfoList[j].binNumber
            ) {
              this.$message({
                message: '仓位编号重复',
                type: 'warning',
              })
              return
            }
          }
        }
        this.$refs.deptBudgetList.validate((valid) => {
          if (valid) {
            this.deptBudgetList.warehousePrivate =
              CodeToText[this.selectedOptions[0]]
            this.deptBudgetList.warehouseCity =
              CodeToText[this.selectedOptions[1]]
            this.deptBudgetList.warehouseArea =
              CodeToText[this.selectedOptions[2]]
            this.deptBudgetList.warehouseType = this.warehouseType
            this.deptBudgetList.baseId = this.baseId
            this.deptBudgetList.compId = this.compId
            this.deptBudgetList.contractType = 1
            this.deptBudgetList.otherPersonPhone = this.deptBudgetList.otherPersonPhone.toString()
            edit(this.deptBudgetList)
              .toPromise()
              .then((response) => {
                this.$message.success('编辑成功')
                this.deptBudgetList = {}
                this.warehouseType = '1'
                this.$router.push({
                  path: 'warehouseManagementList'
                })
              })
          } else {
            //EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
            return false
          }
        })
        new Promise((resolve, reject) => {
          const newAppendixs = this.fileList
          const params = {
            newAppendixs
          }
          saveFiles(params)
            .toPromise()
            .then((res) => {
              resolve(res.join())
            })
            .catch((err) => {
              EventBus.$emit('error', this.$t('showMessage.saveFilesError'))
              reject()
            })
        })
      },

      // 关闭 dialog时 处理文件url 初始化upload组件
      handleCloe() {
        this.dialogViewSpareMoney = false
      },
      history(row) {
        console.log(row)
        billoperatehis({
            id: row.id
          })
          .toPromise()
          .then((response) => {
            this.historyList = response
          })
      },
      //删除

      approve() {},
      listQuery() {},
      total() {},
      clearfiltQuery() {},
      selectCrtDuty() {},
    },
  }
</script>
<style lang="scss" scoped>
  /deep/.totalStorage .el-input__inner {
    color: #afb5cb;
    background: #f5f7fa;
  }

  .small-title {
    position: relative;
    padding: 10px;
    font-weight: 600;
  }

  .small-title::before {
    position: absolute;
    content: '';
    display: block;
    background: #5473e8;
    width: 4px;
    height: 14px;
    left: 0px;
    top: 13px;
  }

  .position {
    position: relative;
  }

  .add,
  .del {
    position: absolute;
    right: -38px;
    top: 9px;
    cursor: pointer;
  }

  .del {
    right: -70px;
  }

  .amap-page-container {
    width: 300px;
    height: 300px;
  }

  .el-form {
    padding: 0 15%;
  }

  /deep/.ws-info-table .el-form-item {
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }

  .readonly {
    position: relative;
  }

  .readonly:after {
    content: '*';
    color: #ff2727;
    position: absolute;
    right: 8px;
    z-index: 10;
    top: 21%;
    font-size: 20px;
  }

  .title {
    position: relative;
  }

  .title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 30px;
    background: #5473e8;
    position: absolute;
    left: 0;
  }

  .ws-info-table {
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
  }

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

  .el-col {
    background: #f6f7fc;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    padding: 0 25px;
    border-left: 1px solid transparent;
    background: #fff;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__label {
    width: 100px;
    text-align: center;
    background: #fff;
    // border: 1px solid #cdd2dc;
  }

  .button-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    width: 100%;
    height: 50px;
    padding: 0 10px;

    &>div {
      margin-left: 10px;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;

      &>span {
        line-height: 50px;
      }
    }

    /deep/.auditFlow-box {
      position: unset;
      margin-left: 10px;

      &/deep/.auditFlow-icon {
        width: auto;
        padding-right: 30px;
      }

      &/deep/.auditFlow-main {
        position: absolute;
      }
    }
  }

  .box-app {
    display: inline-block;
    float: left;
    margin-left: 30px;
    line-height: 50px;
  }

  /deep/.el-dialog {
    .el-form-item {
      margin-bottom: 0 !important;

      .el-input--medium {
        textarea {
          min-height: 100px !important;
        }
      }
    }
  }

  .collapse-bottom {
    margin-bottom: 20px;
  }

  .input-main .textarea .el-textarea__inner {
    width: 100%;
    z-index: 1;
  }

  .bg-left {
    padding-left: 30px;
  }

  .bg-right {
    padding-right: 10px;
    text-align: right;
  }

  .bg-bottom {
    margin: 15px 0px;
  }

  .wenzi {
    width: 900px;
    margin: 0 auto;
  }

  .wenzi h3 {
    display: inline-block;
    left: 10px;
  }

  .wenzi p {
    display: inline-block;
  }

  .center {
    width: 900px;
    margin: 0 auto;
  }

  .el-form-item {
    width: 50%;
  }

  .el-form-item__label {
    text-align: center;
  }

  .ce {
    width: 900px;
    margin: 0 auto;
  }

  /*.crt-main .textarea /deep/ .el-form-item__label {*/
  /*  height: 82px;*/
  /*}*/
  // 控制select为只读的时候显示样式

  .hide-sel {
    .el-input__inner {
      border: 0px;
    }

    .el-icon-arrow-up {
      display: none;
    }

    .el-textarea__inner {
      background-color: #fff !important;
      border: 0;
    }

    .el-date-editor {
      i {
        display: none;
      }
    }

    .is-disabled {
      .el-input__inner:hover {
        background-color: #fff !important;
        border: 0;
      }

      color: #606266;

      .el-input__inner {
        background-color: #fff !important;
        border: 0;
        color: #606266;
      }

      .el-textarea__inner {
        background-color: #fff !important;
        border: 0;
        color: #606266;
      }
    }
  }

  // 控制select为只读的时候显示样式
  /deep/.ws-class-table-col {
    height: auto;
    padding: 0px 2px;

    /deep/.el-input__inner {
      padding: 0px 2px;
    }
  }

  /deep/.is-disabled {
    .el-input__prefix,
    .el-input__suffix {
      display: none;
    }

    .el-input__inner {
      background-color: #fff;
      border-color: #fff !important;
      color: #000 !important;
      font-size: 14px;
      cursor: text;
      padding: 0 !important;
    }
  }

  .winseaview-view {
    padding: 0 0 20px;
  }

  .container {
    overflow: scroll;
    height: 93vh;
  }

  .ws-info-table .el-form-item {
    width: 33.3333%;
  }

  .readonly:after {
    display: none;
  }

  .el-textarea__inner {
    display: none;
  }

  .el-form {
    margin-top: 50px;
  }

  .readonly {
    width: 16%;
  }

  .ws-info-table .el-form-item {
    width: 33.33%;
  }

  //去边框
  /deep/.el-form-item {
    border-right: 0px;
    border-bottom: 0px;
  }

  /deep/.ws-info-table {
    border-left: 0px;
    border-top: 0px;
  }

  .ws-info-table .el-form-item .el-form-item__content {
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-top: 0px;
  }

  /deep/.ws-info-table .el-form-item {
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-top: 0px;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    background: #f5f7fa;
    border-radius: 4px;
    border: 1px solid #d8dce6;
    font-family: PingFangSC-Regular, PingFang SC;
    margin-bottom: 5px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    color: #8890b1;
    line-height: 16px;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__label {
    background-color: #fff;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8890b1;
    line-height: 16px;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    border: 0px;
  }

  .addressUrls {
    width: 100%;
    display: flex;
    margin-top: 10px;
  }

  .addressUrl {
    margin: 0 10px;
    border-radius: 3px;
  }

  .addressUrls-item {
    position: relative;
  }

  .icon-guanbi {
    position: absolute;
    right: 0;
  }
</style>