对接问题知识库

2022-08-10 16:35:09 +08:00
parent 4afa28a648
commit 24961940fe
4 changed files with 194 additions and 53 deletions
@@ -38,7 +38,7 @@
    </div>
    <div class="content-box">
      <div class="content-box-box" v-for="(item,index) in conList" :key="index" @click="contentClick(item)">
-        <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
+        <img :src="item.countryNationalFlag" class="content-box-box-img" alt="">
        <span class="content-box-box-text">
             {{item.applyMarket_dictText}}
        </span>
@@ -144,7 +144,7 @@
          path: '/countryCardView',
          query: {
            applyMarket: row.applyMarket,
-            id: row.id,
+            id: row.id
          }
        })
        window.open(newUrl.href, '_blank')
@@ -216,14 +216,14 @@
  }

  .content-box-box-img {
-    width: 70%;
+    width: 238px;
    height: 100%;
    border-right: 1px #d9d9d9 solid;
  }

  .content-box-box-text {
+    width: calc(100% - 238px);
    display: inline-block;
-    width: 30%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
@@ -234,6 +234,7 @@
    width: 100%;
    text-align: right;
    margin-top: 20px;
+    margin-bottom: 20px;
  }

  .operator-text {
@@ -23,22 +23,37 @@
          </div>
          <div style="overflow: auto;height: calc(100vh - 160px);">
            <div class="content-box" :style="{'width':clientWidth}" v-if="isTrue">
-              <div style="width: 100%" v-for="(item1,index) in 14" class="content-box-top">
-                <div v-for="(item2,index2) in 16" style="width: 340px;display: inline-block" class="content-box-left">
+              <div style="width: 100%" v-for="(item1,index) in contentList" class="content-box-top">
+                <div v-for="(item2,index2) in item1.list" style="width: 340px;display: inline-block"
+                     class="content-box-left">
                  <div class="content-box-box-top" v-if="index == 0">
                    <img class="content-box-box-img" style="display: inline-block;width: auto" v-if="index2 == 0">
-                    <img src="../../../../assets/mobileHome.png" v-else class="content-box-box-img" alt="">
+                    <img :src="item2.img" v-else class="content-box-box-img" alt="">
                    <span v-if="index2 == 0" class="content-box-box-text"></span>
                    <span v-else class="content-box-box-text">
-                      中国
+                      {{item2.applyMarket_dictText}}
                    </span>

                  </div>
                  <div class="content-box-box" v-else>
-                    <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
-                    <span class="content-box-box-text">
-                      中国
-                  </span>
+                    <span style="color: #21c9cc"
+                          :class="{'content-box-box-text-admin':!item2.lableName || item2.lableName == 'null' || item2.lableName == 'undefined'? true : false}"
+                          class="content-box-box-text content-box-box-text-index"
+                          @click="viewFileClick(item2.lableName)"
+                          v-if="item2.lableType == 7 && item2.lableName && index2 != 0">
+                         {{$t('viewFile')}}
+                    </span>
+                    <span class="content-box-box-text content-box-box-text-index"
+                          v-else
+                          :title="item2.lableName"
+                          :class="{'content-box-box-text-admin':!item2.lableName || item2.lableName == 'null' || item2.lableName == 'undefined'? true : false}">
+                        {{item2.lableName}}
+                    </span>
+
+                    <!--                    <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">-->
+                    <!--                    <span class="content-box-box-text">-->
+                    <!--                      中国-->
+                    <!--                  </span>-->
                  </div>
                </div>
              </div>
@@ -47,8 +62,11 @@
        </div>
      </div>
    </div>
-    <displayInformationModel ref="displayInformationModelRef"/>
+    <displayInformationModel ref="displayInformationModelRef"
+                             @displayInformationModelForm="displayInformationModelForm"/>
    <countryCardViewAdd ref="countryCardViewAddRef" @countryCardViewAddForm="countryCardViewAddForm"/>
+    <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
+    <viewFileModel ref="viewFileModelRef"/>
  </div>
 </template>

@@ -56,49 +74,155 @@
  import { getAction, postAction, downloadFile } from '@/api/manage'
  import displayInformationModel from './displayInformationModel'
  import countryCardViewAdd from './countryCardViewAdd'
+  import viewFileModel from '@/components/viewFileModel/index'

  export default {
    name: 'countryCardView',
    components: {
      displayInformationModel,
-      countryCardViewAdd
+      countryCardViewAdd,
+      viewFileModel
    },
    data() {
      return {
        clientWidth: '',
        isTrue: false,
+        loading: false,
        dataList: [],
+        contentList: [],
+        displayList: [],
+        queryCountryList: [],
+        countryCardViewList:[],
+        applyMarkets: '',
+        url: {
+          list: '/problemKnowledgeBase/countryCardTempEO/list',
+          deleteOne: ''
+        },
        list: '/problemKnowledgeBase/countryCardManageReleaseEO/queryCountryCardManageReleaseByApplyMarkets'
      }
    },
    mounted() {
-      this.isTrue = false
-      this.$nextTick(() => {
-        this.clientWidth = 340 * 14 + 'px'
-        this.isTrue = true
+      this.queryCountry(() => {
+        this.replacePage()
      })
-      this.queryCountry()
    },
    methods: {
      displayInformationClick() {
-        this.$refs.displayInformationModelRef.getData()
+        this.$refs.displayInformationModelRef.getData(JSON.parse(JSON.stringify(this.displayList)))
+      },
+      displayInformationModelForm(data) {
+        this.displayList = data
+        this.displayList = [...this.displayList]
+        this.consolidateData()
      },
      newlyAddedClick() {
-        this.$refs.countryCardViewAddRef.add()
+        this.$refs.countryCardViewAddRef.add(this.countryCardViewList)
      },
      countryCardViewAddForm(val) {
-
+        this.countryCardViewList = JSON.parse(JSON.stringify(val))
+        let content = []
+        if (val && val.length > 0) {
+          val.forEach(res => {
+            if (res.applyMarket) {
+              content.push(res.applyMarket)
+            }
+          })
+        }
+        this.applyMarkets = content.join(',')
+        this.queryCountry()
      },
-      queryCountry() {
+      replacePage() {
+        getAction(this.url.list, {}).then((res) => {
+          if (res.success) {
+            this.displayList = res.result || []
+            this.displayList.forEach(val => {
+              val.showOrNot = true
+            })
+            this.consolidateData()
+            this.loading = false
+          } else {
+            this.displayList = []
+            this.loading = false
+          }
+        })
+      },
+      consolidateData() {
+        let content = []
+        this.contentList = []
+        this.contentList.push({})
+        if (this.displayList && this.displayList.length > 0) {
+          this.displayList.forEach(res => {
+            if (res.showOrNot) {
+              content.push(res)
+            }
+          })
+        }
+        if (this.queryCountryList && this.queryCountryList.length > 0) {
+          this.contentList[0].list = []
+          this.contentList[0].list.push({})
+          this.queryCountryList.forEach(val => {
+            this.contentList[0].name = 'tou'
+            this.contentList[0].list.push({
+              applyMarket_dictText: val.applyMarket_dictText,
+              img: val.countryNationalFlag
+            })
+          })
+        }
+        if (content && content.length > 0) {
+          content.forEach((res, index) => {
+            this.contentList[index + 1] = { name: res.lableName }
+            this.contentList[index + 1].list = []
+            this.contentList[index + 1].list.push({
+              lableName: res.lableName,
+              lableType: res.lableType
+            })
+          })
+        }
+        this.queryCountryList.forEach((res, index) => {
+          res.countryCardManageReleaseDetailEOList.forEach((val, index1) => {
+            this.contentList.forEach(res1 => {
+              if (res1.name == val.lableName) {
+                res1.list.push({
+                  lableName: val.content,
+                  lableType: val.lableType
+                })
+              }
+            })
+          })
+        })
+        console.log(this.contentList)
+      },
+      queryCountry(callback) {
+        this.loading = true
        let applyMarkets = this.$route.query.applyMarket
+        if (this.applyMarkets) {
+          applyMarkets = applyMarkets + ',' + this.applyMarkets
+        }
        let query = {
          applyMarkets: applyMarkets
        }
        postAction(this.list, query).then((res) => {
          if (res.success) {
-
+            this.queryCountryList = res.result || []
+            this.isTrue = false
+            this.$nextTick(() => {
+              this.clientWidth = 340 * (this.queryCountryList.length + 1) + 'px'
+              this.isTrue = true
+            })
+            callback && callback()
+            if (!callback) {
+              this.consolidateData()
+              this.loading = false
+            }
+          } else {
+            callback && callback()
+            this.contentList = []
+            this.loading = false
          }
        })
+      },
+      viewFileClick(item) {
+        this.$refs.viewFileModelRef.clickButtonToUpload(item)
      }
    }
  }
@@ -218,6 +342,8 @@
    width: 340px;
    display: inline-block;
    height: 80px;
+    line-height: 80px;
+    text-align: center;
    background: #fff;
    border-right: 1px #d9d9d9 solid;
    border-bottom: 1px #d9d9d9 solid;
@@ -249,10 +375,28 @@
    background: #fff;
  }

+  .content-box-top {
+    height: 80px;
+  }
+
  .content-box-top:first-child {
    position: sticky;
    top: 0;
+    height: 160px;
    z-index: 111;
    background: #fff;
  }
+
+  .content-box-box-text-index {
+    width: 100% !important;
+    padding: 0 12px;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .content-box-box-text-admin {
+    height: 80px !important;
+  }
 </style>
@@ -31,7 +31,6 @@
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
-              <span class="Required">*</span>
              <span class="title-text-text" :title="$t('comparisonMarket')+(index+1)">{{$t('comparisonMarket')+(index+1)}}</span>
            </div>
            <a-form-model-item class="itemModel" style="width: calc(100% - 220px)" prop="comparisonMarket">
@@ -111,14 +110,19 @@
    mounted() {
    },
    methods: {
-      add() {
+      add(data) {
        this.visible = true
+        console.log(data)
        this.$nextTick(() => {
          this.formInline = {}
          this.formInline.applyMarket = this.$route.query.applyMarket
-          this.formInline.dataList = [{
-            relatedSection: ''
-          }]
+          if (data && data.length > 0) {
+            this.formInline.dataList = JSON.parse(JSON.stringify(data))
+          } else {
+            this.formInline.dataList = [{
+              applyMarket: ''
+            }]
+          }
          this.getList()
          this.formInline = { ...this.formInline }
          this.$refs.ruleForm.clearValidate()
@@ -129,11 +133,8 @@
        this.formInline = { ...this.formInline }
      },
      handleOk() {
-        this.$refs.ruleForm.validate(valid => {
-          if (valid) {
-
-          }
-        })
+        this.$emit('countryCardViewAddForm', JSON.parse(JSON.stringify(this.formInline.dataList)))
+        this.visible = false
      },
      handleCancel() {
        this.visible = false
@@ -185,8 +186,6 @@
          for (let j = 0; j < this.formInline.dataList[i].applyMarketList.length; j++) {
            if (contentIndex.includes(this.formInline.dataList[i].applyMarketList[j].applyMarket)
              && this.formInline.dataList[i].applyMarket != this.formInline.dataList[i].applyMarketList[j].applyMarket) {
-              console.log(111)
-              console.log(j)
              this.formInline.dataList[i].applyMarketList.splice(j, 1)
              j--
            }
@@ -11,13 +11,15 @@
      style="height: 100%;overflow: auto;padding-bottom: 53px;">
      <div style="margin-bottom: 60px">
        <a-table
+          v-if="this.visible"
+          :key="'id'"
          :columns="columns"
          :scroll="{x: '100%',y:'calc(100vh - 200px)'}"
          :data-source="dataList"
          :pagination="false"
          :loading="loading">
-           <span slot="showOrNot" slot-scope="text,record">
-              <a-checkbox :value="text"></a-checkbox>
+           <span slot="showOrNot" slot-scope="text,record,index">
+                 <a-checkbox :checked="record.showOrNot" @change="onCheckAllChange(index)"></a-checkbox>
           </span>
        </a-table>
      </div>
@@ -65,28 +67,23 @@
    mounted() {
    },
    methods: {
-      getData() {
+      getData(data) {
        this.visible = true
-        this.replacePage()
+        this.$nextTick(() => {
+          this.dataList = data
+          this.dataList = [...this.dataList]
+        })
      },
      handleCancel() {
        this.visible = false
      },
      handleSubmit() {
-
-      },
-      replacePage() {
-        this.loading = true
-       getAction(this.url.list, {}).then((res) => {
-          if (res.success) {
-            this.dataList = res.result || []
-            this.loading = false
-          } else {
-            this.dataList = []
-            this.loading = false
-          }
-        })
+        this.$emit('displayInformationModelForm', this.dataList)
+        this.visible = false
      },
+      onCheckAllChange(index) {
+        this.dataList[index].showOrNot = !this.dataList[index].showOrNot
+      }
    }
  }
 </script>