调整历史记录

src/components/chat-content.vue

@@ -413,7 +413,7 @@
             </div>
             <div class="chat-items">
               <div class="content-left-main computing-text-box" style="padding: 14rem">
-                <gm-network-address :itemList="item"></gm-network-address>
+                <gm-network-address :itemList="item" :disabled="isHistory"></gm-network-address>
               </div>
             </div>
           </div>

src/components/gmNetwork-address.vue

@@ -30,9 +30,6 @@
         >
         </van-field>
       </div>
-      <!-- <div style="color:#fd7d45;font-size:11px">
-            *{{textInfo.tip||'若无可选区域选项则表示暂未设置网点'}}
-        </div> -->
 
       <div class="van-address-edit-btn">
         <van-button
@@ -41,7 +38,6 @@
           color="#5A9CFF"
           :disabled="submitDisabled"
           :loading="submitLoad"
-          type="info"
           loading-text="变更中..."
           @click.stop="submitInfo"
           >确 认</van-button
@@ -54,60 +50,47 @@
         <div
           v-for="(item, index) in networkInfo"
           :key="index"
-          :style="{ 'border-top': index > 0 ? '1px dashed #666' : '' }"
+          :style="{ 'border-top': index > 0 ? '1rem dashed #666' : '' }"
         >
           <div
             class="networkInfo-title displayleft"
-            style="margin: 10px 0; font-size: 16px; align-items: center"
+            style="margin: 10rem 0; font-size: 16rem; align-items: center"
           >
             <img
               src="../assets/images/company.png"
-              style="width: 19px; height: 17px; margin-right: 8px"
+              style="width: 19rem; height: 17rem; margin-right: 8rem"
               alt=""
             />
             <div>{{ item.intorgName }}</div>
           </div>
-          <div class="displayleft" style="margin: 10px 0">
-            <div style="width: 110px">地<span style="opacity: 0">地址</span>址：</div>
-            <div style="color: #666; flex: 1; font-size: 12px">
+          <div class="displayleft" style="margin: 10rem 0">
+            <div style="width: 110rem">地<span style="opacity: 0">地址</span>址：</div>
+            <div style="color: #666; flex: 1; font-size: 12rem">
               {{ item.address }}
             </div>
           </div>
-          <div class="displayleft" style="margin: 10px 0">
-            <div style="width: 110px">电<span style="opacity: 0">电话</span>话：</div>
-            <div style="color: #666; flex: 1; font-size: 12px">
+          <div class="displayleft" style="margin: 10rem 0">
+            <div style="width: 110rem">电<span style="opacity: 0">电话</span>话：</div>
+            <div style="color: #666; flex: 1; font-size: 12rem">
               <div v-if="item.tel" v-html="item.tel"></div>
             </div>
           </div>
-          <div class="displayleft" style="margin: 10px 0">
-            <div style="width: 110px">营业时间：</div>
-            <div style="color: #666; flex: 1; font-size: 12px">
+          <div class="displayleft" style="margin: 10rem 0">
+            <div style="width: 110rem">营业时间：</div>
+            <div style="color: #666; flex: 1; font-size: 12rem">
               <div v-if="item.worktime" v-html="item.worktime"></div>
             </div>
           </div>
-          <div class="displayleft" style="margin: 10px 0">
-            <div style="width: 110px">服务项目：</div>
-            <div style="color: #666; flex: 1; font-size: 12px">
+          <div class="displayleft" style="margin: 10rem 0">
+            <div style="width: 110rem">服务项目：</div>
+            <div style="color: #666; flex: 1; font-size: 12rem">
               <div v-if="item.shouliquanx" v-html="item.shouliquanx"></div>
             </div>
           </div>
-          <!-- <div
-            class="displayleft"
-            style="margin: 10px 0"
-            v-if="item.worktime && item.worktime.remark"
-          >
-            <div style="width: 80px">
-              备<span style="opacity: 0">备注</span>注：
-            </div>
-            <div
-              style="color: #666; flex: 1; font-size: 12px"
-              v-html="item.worktime.remark"
-            ></div>
-          </div> -->
         </div>
       </template>
       <template v-else-if="networkInfo == 'noOne'">
-        <div style="text-align: left; font-size: 14px; color: #666">
+        <div style="text-align: left; font-size: 14rem; color: #666">
           您好，您所选的区域未设立我司网点，请您选择其他区域
         </div>
       </template>
@@ -115,16 +98,16 @@
 
     <van-popup
       class="edit-address-popup-box"
-      v-model="isEditShow"
-      get-container="body"
+      v-model:show="isEditShow"
+      teleport="body"
       position="bottom"
       :duration="0.2"
     >
       <!-- vant Picker 根据 绑定的columns数据，来渲染几级联动，这里我们使用的是二级联动 -->
       <van-picker
         show-toolbar
-        value-key="name"
         :columns="provinceCityColumns"
+        :columns-field-names="{ text: 'name' }"
         :item-height="40"
         @cancel="isEditShow = false"
         @confirm="onProvinceCityConfirm"
@@ -133,15 +116,15 @@
 
     <van-popup
       class="edit-address-popup-box"
-      v-model="isEditShow1"
-      get-container="body"
+      v-model:show="isEditShow1"
+      teleport="body"
       position="bottom"
       :duration="0.2"
     >
       <van-picker
         show-toolbar
-        value-key="name"
         :columns="districtColumns"
+        :columns-field-names="{ text: 'name' }"
         :item-height="40"
         @cancel="isEditShow1 = false"
         @confirm="onDistrictConfirm"
@@ -150,211 +133,171 @@
   </div>
 </template>
 
-<script>
-import { pcaList } from '@/mock/network-code'
-import { mapState, mapActions } from 'pinia'
+<script setup>
+import { ref, nextTick, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { showNotify } from 'vant'
+import _ from 'lodash'
 import { useAppStore } from '@/store/app.js'
-import { Toast, Loading, Dialog, Field, Notify, Button, Popup, Picker } from 'vant'
+import { Post } from '@/utils/https'
+import { pcaList } from '@/mock/network-code'
+
+const props = defineProps({
+  disabled: { type: Boolean, default: false },
+  itemList: { type: Object, default: () => ({}) },
+})
+
+const store = useAppStore()
+const { sessionId, source, mescrollContent, pcaData } = storeToRefs(store)
+
+const isEditShow = ref(false) // 省市选择弹窗
+const isEditShow1 = ref(false) // 区选择弹窗
+const provinceCityColumns = ref([])
+const districtColumns = ref([])
+const province = ref('')
+const city = ref('')
+const area = ref('')
+const selectedData = ref('') // 选中的省市
+const selectedData1 = ref('') // 选中的区
+const submitLoad = ref(false)
+const submitDisabled = ref(false)
+const networkInfo = ref(null) // 具体营业网点信息
+const textInfo = ref({ head: '', tips: '' }) // 提示信息
+
+function sourcePcaList() {
+  return _.isNull(pcaData.value) || pcaData.value.length === 0 ? pcaList : pcaData.value
+}
 
-export default {
-  name: 'editAddress1',
-  props: ['disabled', 'itemList'],
-  components: {
-    [Loading.name]: Loading,
-    [Picker.name]: Picker,
-    [Popup.name]: Popup,
-    [Field.name]: Field,
-    [Button.name]: Button,
-    [Notify.name]: Notify,
-  },
-  data() {
-    return {
-      areaList: pcaList, //接口返回所有省市区数据
-      isEditShow: false, //vant Popup弹出框显示隐藏
-      isEditShow1: false,
-      columns: [],
-      provinceCityColumns: [],
-      districtColumns: [],
-      province: '',
-      city: '',
-      area: '',
-      selectedData: '', //选中的数据
-      selectedData1: '',
-      submitLoad: false,
-      submitDisabled: false,
-      networkInfo: null, // 具体营业网点信息
-      textInfo: { head: '', tips: '' }, // 提示信息
+function scrollTopBody() {
+  setTimeout(() => {
+    // 滚动到底部
+    try {
+      const el = mescrollContent.value
+      if (el) el.scrollTop = el.scrollHeight || 0
+    } catch (error) {
+      console.log(error.message)
     }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'userId',
-      'sendLoading',
-      'chatList',
-      'sessionId',
-      'source',
-      'mescrollContent',
-      'userInfo',
-      'pcaData',
-    ]),
-  },
-  created() {
-    if (this.itemList.cmd != '$gmmdbdcx-da') {
-      if (this.itemList.msgText.split('||').length == 3) {
-        this.textInfo.head = this.itemList.msgText.split('||')[0]
-        this.textInfo.tips = this.itemList.msgText.split('||')[1].replace(/\\n/g, '<br>')
+  }, 300)
+}
+
+function verification() {
+  if (!selectedData.value) {
+    showNotify('请选择省/市')
+    return false
+  }
+  return true
+}
+
+// 省市选择确认
+function onProvinceCityConfirm({ selectedOptions }) {
+  const prov = selectedOptions[0] || {}
+  const cityOpt = selectedOptions[1] || {}
+  province.value = prov.name || ''
+  city.value = cityOpt.name || ''
+  // 关闭省市选择器
+  isEditShow.value = false
+  // 从原始省市区数据里取该市下面的区
+  const originalProvince = sourcePcaList().find((p) => p.provinceName === province.value)
+  const originalCity = originalProvince?.childrenList?.find((c) => c.provinceName === city.value)
+  districtColumns.value = (originalCity?.childrenList || []).map((district) => ({
+    name: district.provinceName,
+  }))
+  selectedData.value = `${province.value}${city.value}`
+  selectedData1.value = ''
+}
+
+// 区选择确认
+function onDistrictConfirm({ selectedOptions }) {
+  area.value = selectedOptions[0]?.name || ''
+  // 关闭区选择器
+  isEditShow1.value = false
+  // 更新选中的数据显示
+  selectedData1.value = `${area.value}`
+}
+
+function submitInfo() {
+  if (!verification()) {
+    return
+  }
+  const info = {
+    cmd: '$gmmdbdcx-da',
+    customerServiceName: null,
+    evaluation: null,
+    fromFlag: 2,
+    imgUrl: null,
+    intentId: '',
+    intents: [],
+    msgSource: 1,
+    msgText: `${province.value},${city.value},${area.value}`,
+    msgType: '01',
+    qaId: props.itemList.qaId,
+    reason: null,
+    reasonDesc: null,
+    reqAndResType: '05',
+    seatNum: '洋洋机器人',
+    sessionId: sessionId.value,
+    source: source.value,
+    timestamp: Date.now(),
+    userId: 408,
+    userName: null,
+    voiceData: null,
+    voiceUrl: null,
+    textInfo: textInfo.value,
+  }
+  store.setChatList(info)
+  scrollTopBody()
+}
+
+function RequestInfo(info) {
+  const infoArr = String(info || '').split(',')
+  const param = {
+    city: infoArr[1],
+    town: infoArr[2],
+  }
+  Post('api/counterInfo', param)
+    .then((res) => {
+      if (typeof res.data == 'object') {
+        networkInfo.value = res.data
       } else {
-        this.textInfo.head = this.itemList.msgText
+        networkInfo.value = 'noOne'
       }
-    }
-    this.provinceCityColumns = (
-      _.isNull(this.pcaData) || this.pcaData.length === 0 ? pcaList : this.pcaData
-    )
-      .filter(
-        (province) =>
-          !['西藏自治区', '香港特别行政区', '澳门特别行政区', '台湾省'].includes(
-            province.provinceName
-          )
-      )
-      .map((province) => ({
-        name: province.provinceName,
-        children: province.childrenList.map((city) => ({
-          name: city.provinceName,
-        })),
-      }))
-    this.submitDisabled = this.disabled
-    if (this.itemList.cmd == '$gmmdbdcx-da') {
-      // console.log("请求地址星系");
-      this.RequestInfo(this.itemList.msgText)
-    } else {
-    }
-    this.$nextTick(() => {
-      this.scrollTopBody()
+      scrollTopBody()
     })
-    if (!this.textInfo) {
-      this.$post('config/storeConfig')
-        .then((res) => {
-          console.log(res)
-          this.textInfo = res.data
-        })
-        .catch((error) => {
-          console.log(error)
-        })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+onMounted(() => {
+  if (props.itemList.cmd != '$gmmdbdcx-da') {
+    const msgText = String(props.itemList.msgText ?? '')
+    const parts = msgText.split('||')
+    if (parts.length == 3) {
+      textInfo.value.head = parts[0]
+      textInfo.value.tips = parts[1].replace(/\\n/g, '<br>')
+    } else {
+      textInfo.value.head = msgText
     }
-  },
-  mounted() {},
-  methods: {
-    ...mapActions(useAppStore, [
-      'set_chatList',
-      'del_chatList',
-      'set_sendLoading',
-      'set_manualService',
-      'set_pcaData',
-    ]),
-    scrollTopBody() {
-      setTimeout(() => {
-        //滚动到底部
-        try {
-          this.mescrollContent.scrollTop = this.mescrollContent.scrollHeight || 0
-        } catch (error) {
-          console.log(error.message)
-        }
-      }, 300)
-    },
-    verification(type) {
-      if (!this.selectedData) {
-        Notify('请选择省/市')
-        return false
-      }
-      return true
-    },
-    //城市选择确认
-    onProvinceCityConfirm(value, itemIndex) {
-      const provinceIndex = itemIndex[0]
-      const cityIndex = itemIndex[1]
-      const province = this.provinceCityColumns[provinceIndex]
-      const city = province.children[cityIndex]
-      this.province = province.name
-      this.city = city.name
-      // 关闭省市选择器
-      this.isEditShow = false
-      // 确保从正确的 `this.pcaList` 获取数据
-      const originalProvince = (
-        _.isNull(this.pcaData) || this.pcaData.length === 0 ? pcaList : this.pcaData
-      ).find((p) => p.provinceName === this.province)
-      const originalCity = originalProvince.childrenList.find((c) => c.provinceName === this.city)
-      // 准备市下面的区数据
-      this.districtColumns = originalCity.childrenList.map((district) => ({
-        name: district.provinceName,
-      }))
-      this.selectedData = `${this.province + this.city}`
-      this.selectedData1 = ''
-    },
+  }
 
-    onDistrictConfirm(value, itemIndex) {
-      this.area = value.name
-      // 关闭区选择器
-      this.isEditShow1 = false
-      // 更新选中的数据显示
-      this.selectedData1 = `${this.area}`
-    },
+  provinceCityColumns.value = sourcePcaList()
+    .filter(
+      (prov) =>
+        !['西藏自治区', '香港特别行政区', '澳门特别行政区', '台湾省'].includes(prov.provinceName),
+    )
+    .map((prov) => ({
+      name: prov.provinceName,
+      children: prov.childrenList.map((cityItem) => ({
+        name: cityItem.provinceName,
+      })),
+    }))
 
-    submitInfo() {
-      console.log(this.chatList)
-      if (!this.verification()) {
-        return
-      }
-      let info = {
-        cmd: '$gmmdbdcx-da',
-        // cmd: "YYWDBD",
-        customerServiceName: null,
-        evaluation: null,
-        fromFlag: 2,
-        imgUrl: null,
-        intentId: '',
-        intents: Array(0),
-        msgSource: 1,
-        msgText: this.province + ',' + this.city + ',' + this.area,
-        msgType: '01',
-        qaId: this.itemList.qaId,
-        reason: null,
-        reasonDesc: null,
-        reqAndResType: '05',
-        seatNum: '洋洋机器人',
-        sessionId: this.sessionId,
-        source: this.source,
-        timestamp: new Date().getTime(),
-        userId: 408,
-        userName: null,
-        voiceData: null,
-        voiceUrl: null,
-        textInfo: this.textInfo,
-      }
-      this.set_chatList(info)
-      this.scrollTopBody()
-    },
-    RequestInfo(info) {
-      let infoArr = info.split(',')
-      let param = {
-        city: infoArr[1],
-        town: infoArr[2],
-      }
-      this.$post('api/counterInfo', param)
-        .then((res) => {
-          console.log(res)
-          if (typeof res.data == 'object') {
-            this.networkInfo = res.data
-          } else {
-            this.networkInfo = 'noOne'
-          }
-          this.scrollTopBody()
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    },
-  },
-}
+  submitDisabled.value = props.disabled
+  if (props.itemList.cmd == '$gmmdbdcx-da') {
+    RequestInfo(props.itemList.msgText)
+  }
+  nextTick(() => scrollTopBody())
+})
 </script>
 
 <style scoped>
@@ -363,10 +306,11 @@ export default {
   /* align-items: center; */
   justify-content: flex-start;
 }
+
 .edit-address-tips-hd {
   font-family: NotoSansHans-Regular;
-  font-size: 12px;
-  line-height: 15px;
+  font-size: 12rem;
+  line-height: 15rem;
   font-weight: 400;
   color: #0047e1;
   word-wrap: break-word;
@@ -375,10 +319,11 @@ export default {
   -webkit-user-select: text;
   user-select: text;
 }
+
 .edit-address-title-hd {
   font-family: NotoSansHans-Regular;
-  font-size: 14px;
-  line-height: 21px;
+  font-size: 14rem;
+  line-height: 21rem;
   font-weight: 700;
   color: #333333;
   word-wrap: break-word;
@@ -386,19 +331,19 @@ export default {
   overflow: hidden;
   -webkit-user-select: text;
   user-select: text;
-  padding-bottom: 15px;
+  padding-bottom: 15rem;
 }
 
 .edit-address-edit-box .van-cell {
-  padding: 10px 0;
+  padding: 10rem 0;
 }
 
 .edit-address-edit-box .van-cell:not(:last-child)::after {
   left: 0;
 }
 
-.edit-address-edit-box :deep() .van-field__label.edit-box-cell {
-  width: 75px;
+.edit-address-edit-box :deep(.van-field__label.edit-box-cell) {
+  width: 75rem;
 }
 
 .code-btn.code-btn-disabled {
@@ -409,18 +354,19 @@ export default {
 }
 
 .edit-box-checkbox-item {
-  padding: 20px 0 0 0;
+  padding: 20rem 0 0 0;
   display: inline-block;
 }
 
-.edit-box-checkbox-item :deep() .van-checkbox__label {
-  margin-top: 2px;
+.edit-box-checkbox-item :deep(.van-checkbox__label) {
+  margin-top: 2rem;
 }
 
 .edit-address-popup-box {
   width: 100%;
 }
+
 .edit-address-box .van-address-edit-btn {
-  padding: 30px 0 10px 0;
+  padding: 30rem 0 10rem 0;
 }
 </style>