citypick

src/App.vue

<script>
export default {
  name: 'App'
  name: 'App',
  created() {
    this.$store.dispatch('getCityData')
  }
}
</script>

src/components/CityPicker/index.vue

          @change="choseProvince"
          placeholder="省/直辖市">
          <el-option
            v-for="item in provinceArr"
            v-for="item in citydata"
            :key="item.id"
            :label="item.value"
            :value="item.id">
  </div>
</template>
<script>
import queryDict from '@/utils/queryDict'
import { mapGetters } from 'vuex'
export default {
  props: ['addrCode'],
  data() {
    return {
      provinceArr: [],
      // provinceArr: [],
      cityArr: [],
      sheng: '',
      shi: ''
    }
  },
  computed: {
    ...mapGetters([
      'citydata'
    ])
  },
  watch: {
    addrCode: function() {
    citydata(val) {
      this.citydata = val
    },
    addrCode(val) {
      var that = this
      setTimeout(function() {
      setTimeout(() => {
        that.initpsq()
      }, 100)
    }
  },
  created() {
    this.getCityData()
    // var that = this
    // setTimeout(() => {
    //   that.initpsq()
    // }, 100)
  },
  methods: {
    getCityData: function() {
      var that = this
      queryDict.applyDict('XZQH', function(dictData) {
        if (dictData && dictData.length > 0) {
          var data = dictData.sort((obj1, obj2) => {
            return obj1.code - obj2.code
          })
          that.provinceArr = {}
          data.map(item => {
            if (item.code.match(/0000$/)) {
              that.provinceArr[item.code] = { id: item.code, value: item.caption, children: {}}
            } else if (item.code.match(/00$/)) {
              var p = that.provinceArr[item.code.slice(0, 2) + '0000']
              p.children[item.code] = { id: item.code, value: item.caption, children: {}}
              if (!p.defaultChild) {
                p.defaultChild = p.children[item.code]
              }
            }
            //  else {
            //   var pp = that.provinceArr[item.code.slice(0, 2) + '0000'].children[item.code.slice(0, 4) + '00']
            //   pp.children[item.code] = { id: item.code, value: item.caption }
            //   if (!pp.defaultChild) {
            //     pp.defaultChild = pp.children[item.code]
            //   }
            // }
          / })
        } else {
          console.log(dictData.status)
        }
      })
    },
    // getCityData: function() {
    //   var that = this
    //   queryDict.applyDict('XZQH', function(dictData) {
    //     if (dictData && dictData.length > 0) {
    //       var data = dictData.sort((obj1, obj2) => {
    //         return obj1.code - obj2.code
    //       })
    //       console.log(dictData)
    //       that.provinceArr = {}
    //       data.map(item => {
    //         if (item.code.match(/0000$/)) {
    //           that.provinceArr[item.code] = { id: item.code, value: item.caption, children: {}}
    //         } else if (item.code.match(/00$/)) {
    //           var p = that.provinceArr[item.code.slice(0, 2) + '0000']
    //           p.children[item.code] = { id: item.code, value: item.caption, children: {}}
    //           if (!p.defaultChild) {
    //             p.defaultChild = p.children[item.code]
    //           }
    //         }
    //         //  else {
    //         //   var pp = that.provinceArr[item.code.slice(0, 2) + '0000'].children[item.code.slice(0, 4) + '00']
    //         //   pp.children[item.code] = { id: item.code, value: item.caption }
    //         //   if (!pp.defaultChild) {
    //         //     pp.defaultChild = pp.children[item.code]
    //         //   }
    //         // / }
    //       })
    //     } else {
    //       console.log(dictData.status)
    //     }
    //   })
    // },
    choseProvince: function(e) {
      var p = this.provinceArr[e]
      var p = this.citydata[e]
      this.cityArr = p.children
      this.sheng = p.value
      this.shi = p.defaultChild.value
      this.$emit('parenStr', this.shi)
    },
    choseCity: function(e) {
      var p = this.provinceArr[e.slice(0, 2) + '0000'].children[e]
      var p = this.citydata[e.slice(0, 2) + '0000'].children[e]
      this.E = p.id
      this.shi = p.value
      this.$emit('paren', this.E)
      }
      const s = this.addrCode.substring(0, 2) + '0000'
      const si = this.addrCode.substring(0, 4) + '00'
      var p = this.provinceArr[s]
      this.sheng = p.value
      this.shi = p.children[si].value
      if (this.citydata) {
        var p = this.citydata[s]
        this.sheng = p.value
        this.shi = p.children[si].value
      }
    }
  }
}

src/router/index.js

          path: 'noactive',
          component: () => import('@/views/companyCen/noactive/index'),
          name: 'noactive',
          parentPath: true,
          alwaysShow: true,
          redirect: { name: 'noactiveList' },
          meta: { title: '未激活企业' },
          children: [
            {
              path: 'noactiveList',
              name: 'noactiveList',
              hidden: true,
              meta: { title: '未激活企业列表' },
              component: () => import('@/views/companyCen/noactive/noactiveList')
            },
            {

src/store/getters.js

  account: state => state.user.account,
  name: state => state.user.name,
  permission_routers: state => state.permission.routers,
  addRouters: state => state.permission.addRouters
  addRouters: state => state.permission.addRouters,
  citydata: state => state.city.citydata
}
export default getters

src/store/index.js

import app from './modules/app'
import permission from './modules/permission'
import user from './modules/user'
import city from './modules/city'
import getters from './getters'
Vue.use(Vuex)
  modules: {
    app,
    permission,
    user
    user,
    city
  },
  getters
})

src/store/modules/city.js

import queryDict from '@/utils/queryDict'
const city = {
  state: {
    citydata: {}
  },
  mutations: {
    citydata: (state, value) => {
      state.citydata = value
    }
  },
  actions: {
    getCityData({ commit, state }) {
      return new Promise((resolve, reject) => {
        queryDict.applyDict('XZQH', (dictData) => {
          if (dictData && dictData.length > 0) {
            var sortData = dictData.sort((obj1, obj2) => {
              return obj1.code - obj2.code
            })
            var arr = {}
            sortData.map(item => {
              if (item.code.match(/0000$/)) {
                arr[item.code] = { id: item.code, value: item.caption, children: {}}
              } else if (item.code.match(/00$/)) {
                var p = arr[item.code.slice(0, 2) + '0000']
                if (p) {
                  p.children[item.code] = { id: item.code, value: item.caption }
                  if (!p.defaultChild) {
                    p.defaultChild = p.children[item.code]
                  }
                } else {
                  arr[item.code.slice(0, 2) + '0000'] = { id: item.code.slice(0, 2) + '0000', value: item.caption, children: {}}
                  var pr = arr[item.code.slice(0, 2) + '0000']
                  pr.children[item.code] = { id: item.code, value: item.caption }
                  if (!pr.defaultChild) {
                    pr.defaultChild = pr.children[item.code]
                  }
                }
              }
            })
            commit('citydata', arr)
          }
          resolve(dictData)
        }, (error) => {
          reject(error)
        })
      })
    }
  }
}
export default city

src/views/companyCen/noactive/compInfo.vue

                </el-col>
                <el-col :span="12">
                  <el-form-item label="所在城市" prop="addr">
                    <cityPicker @paren="toshow" :addrCode="formObj.addr"></cityPicker>
                    <cityPicker @paren="toshow" :addrCode="addrCur"></cityPicker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
        numRanger: [],
        compType: [],
        keywordObj: {},
        addrCur: '',
        formLoading: false,
        rulesObj: {
          name: [{ required: true, message: requiredTip('企业全部名称'), trigger: 'blur' }],
          if (res.success) {
            const obj = res.data
            that.formObj = obj
            that.addrCur = obj.addr
          }
        })
      },

src/views/companyCen/noactive/productInfo.vue

                    <el-input v-model="formObj.name" placeholder="请填写产品名称" maxlength="30"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="tagsShow">
                <el-col :span="24">
                  <el-form-item label="关键词">
                    <dynamicTags :dyStr="formObj.keyword" :tagInfo="tagKeyword" @turnTags="turnKeywordTags"></dynamicTags>
                    <dynamicTags :dyStr="keywordObj" :tagInfo="tagKeyword" @turnTags="turnKeywordTags($event)"></dynamicTags>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
      return {
        companyId: '',
        productId: '',
        tagsShow: false,
        tagKeyword: {
          lableTit: '关键词',
          placeholder: '请填写相关的关键词，如：腐蚀防护、石墨烯、纳米材料',
          limitCount: 10,
          tagsNum: 5
        },
        keywordObj: [],
        formLoading: true,
        formObj: {
          name: '',
                objKey.push(item.keyword)
              })
            }
            that.keywordObj = objKey
            that.formObj.keyword = objKey
            setTimeout(function() {
              that.tagsShow = true
            }, 1)
          }
        })
      },

src/views/specialExperts/expertSort.vue

          {{form.orgName}}
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="level">
          <div class='labelBox'>专家平台序号</div></span>
          <div class='labelBox'>专家平台序号</div>
          <el-input type="number" v-model.number="form.level" placeholder="最多三位数字" class="conBox" min="0" max="999" ></el-input>
        </el-form-item>
        <el-form-item class="modiaB">
  .t-left {
    float: left
  }
  .headPhoto {
    
    
  }
  .headPhoto img {
    width: 100px;