DSDSWeb/src/views/tagDialog.vue

<template>
  <div id="city" class="page myPage">
    <div style="background:#f6f4f5">
      <el-row>
        <el-col :span="12">
          <div class="search-city-back">
            <div class="search-city">
              <el-input
                v-model="citySearch"
                type="text"
                placeholder="请输入名称"
              />
            </div>
          </div>
        </el-col>
      </el-row>

      <a v-if="citySearch" href="javascript:;" class="img-del" @click="citySearch=''" />

    </div>
    <div style="color:red;font-size:14px;padding: 10px 20px;">
      说明：搜捞任务信息从外系统（搜捞系统）获取
    </div>
    <div class="ad_a">
      已选择：{{ chooseNo }}<a v-if="chooseNo" href="javascript:;" class="img-del" @click="chooseNo=''" />
    </div>

    <div id="city-content" class="city-content">
      <div v-for="(item,index) in list" :key="index" class="letter-item">
        <el-row>
          <el-col :span="18">
            <div
              class="item-buttom"
              @click="cityChoose(item)"
            >{{ item.no }}
            </div>
          </el-col>
          <el-col :span="6">
            <!-- <div id="view">查看详情</div> -->
            <a href="" target="_bank" class="view">查看详情</a>
          </el-col>
        </el-row>

      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        style="width: 100px"
        type="primary"
        @click="submit()"
      >确定</el-button>
      <el-button
        style="margin-left: 10px; width: 100px"
        type="info"
        plain
        @click="handleConcel"
      >取消</el-button>
    </div>
  </div>
</template>
<script>
import Pinyin from 'js-pinyin'
import { getCommonDataList
} from '@/api/remit'
export default {
  props: {
    'config': {
      type: Object,
      default: () => {
        return {
          letterColor: '#f44f0f'
        }
      }
    },
    pageType: {
      type: Number,
      default: 1 // 1:全国城市列表
    },
    chooseData: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: null
    },
    sourceData: {
      type: Array,
      default: () => {
        []
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      title: '样品数据类型',
      citys: ['北京', '阿拉善', '澳门', '驻马店', '南京', '武汉', '秦皇岛', '厦门', '洛阳', '南召', '南阳'],
      citys_a: [],
      showCity: null,
      tipString: null,
      letter: null,
      citySearch: '',
      sourcePageType: 1,
      chooseNo: '',
      currentIndex: 0,
      list: [
        {
          no: 'yjsl_dxcw_20230302001'
        },
        {
          no: 'yjsl_dxcw_20230302002'
        }
      ]
    }
  },
  created() {

  },
  mounted() {
  },
  methods: {
    cityChoose(item) {
      this.chooseNo = item.no
    },
    async commonDataList() {
      try {
        const res = await getCommonDataList({ type: this.type })
        if (res.code == 200) {
          this.commonList = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    closeDialog() {

    },
    // 保存
    async submit() {
      this.$emit('handleConfirm', this.chooseNo)
    },
    handleConcel() {
      this.$emit('handleClose')
    }
  }
}
</script>
<style lang="scss" scoped>
  .ad_a{
    padding:10px 20px;
    position: relative;
  }
  #city .ad_a .img-del{
    top:12px
  }
  #city {
    position: relative;
    background: #ffffff;
  }
  #city{
    position: relative;
    .city-content {
      padding: 0px 0 0 0;
      height:400px;
      overflow: auto;
    }

    .letter-item > div {
      color: #333;
      line-height: 45px;
      font-size: 14px;
      padding: 0 30px 0 15px;
      background-color: #fff;
    }

    .letter-item  {
      border-bottom: 1px solid #e6e6e6;
      cursor: pointer;
    }
    .letter-item > div:hover{
        color: #3378e7;
    }

    .search-city-back {
      width: 100%;
    //   position: fixed;
      background-color: #f6f4f5;
      max-width: 414px;
      margin-bottom:4px;
      padding:1px 1px;
    }

    .search-city {
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
      border-radius: 14px;
      margin: 12px 15px;
      background-color: #ffffff;
      input{
          background-color: #907f7f00;border: none;
      }
    }

    .search-city input {
      width: 80%;
    //   margin-left: 5px;
      line-height: 24px;
      border-radius: 5px;
      outline: none;
      font-size: 15px;
    }

    .img-del {
      width: 16px;
      height: 16px;
      position: absolute;
      top: 19px;
      right: 30px;
      background-color: rgba(0, 0, 0, .2);
      border-radius: 8px;
    }

    .img-del::before, .img-del::after {
      content: ' ';
      width: 0;
      height: 50%;
      position: absolute;
      top: 4px;
      right: 7px;
      border-right: 1px solid #fff;
    }

    .img-del::before {
      transform: rotate(45deg);
    }

    .img-del::after {
      transform: rotate(-45deg);
    }
  }
  .view {
    color: #3378e7;
  }
</style>