From ecd1567551666509865986a7313e4b5c8473dd90 Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Thu, 4 Aug 2022 14:17:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=9F=A5=E8=AF=86=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/common/lang/en-us.js             |   1 +
 jero-web/src/common/lang/zh-cn.js             |   1 +
 .../components/countryCardView.vue            |   9 +-
 .../components/countryCardViewAdd.vue         | 189 ++++++++++++++++++
 4 files changed, 198 insertions(+), 2 deletions(-)
 create mode 100644 jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue

diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 355390f1c..5f6504752 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -1233,5 +1233,6 @@ module.exports = {
   displayInformation:'Display information',
   addComparison:'Add comparison',
   showOrNot:'Show or not',
+  comparisonMarket:'Comparison Market',
   share:'share',
 }
\ No newline at end of file
diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js
index fd8e3409e..42bcd2ad4 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -1336,5 +1336,6 @@ module.exports = {
   displayInformation:'展示信息',
   addComparison:'添加对比',
   showOrNot:'是否展示',
+  comparisonMarket:'对比市场',
   share:'分享',
 }
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
index e2d651aea..0992708af 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
@@ -70,17 +70,19 @@
       </div>
     </div>
     <displayInformationModel ref="displayInformationModelRef"/>
+    <countryCardViewAdd ref="countryCardViewAddRef" @countryCardViewAddForm="countryCardViewAddForm"/>
   </div>
 </template>
 
 <script>
   import { getAction, postAction, downloadFile } from '@/api/manage'
   import displayInformationModel from './displayInformationModel'
-
+  import countryCardViewAdd from './countryCardViewAdd'
   export default {
     name: 'countryCardView',
     components: {
-      displayInformationModel
+      displayInformationModel,
+      countryCardViewAdd
     },
     data() {
       return {}
@@ -92,6 +94,9 @@
         this.$refs.displayInformationModelRef.getData()
       },
       newlyAddedClick() {
+       this.$refs.countryCardViewAddRef.add()
+      },
+      countryCardViewAddForm(){
 
       }
     }
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue
new file mode 100644
index 000000000..da74db64a
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue
@@ -0,0 +1,189 @@
+<template>
+  <a-modal
+    :title="$t('addComparison')"
+    :width="700"
+    :height="500"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :maskClosable="false"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('applicableMarket')">{{$t('applicableMarket')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="applicableMarket">
+              <a-input class="box-input"
+                       v-model="formInline.applicableMarket"
+                       :placeholder="$t('PleaseEnter')+$t('applicableMarket')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24" v-for="(item,index) in formInline.dataList">
+        <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">
+              <a-input class="box-input"
+                       v-model="formInline.comparisonMarket"
+                       :placeholder="$t('PleaseEnter')+$t('comparisonMarket')"/>
+            </a-form-model-item>
+
+            <a-icon class="icon-size"
+                    style="margin-left: 8px"
+                    @click="addData"
+                    v-if="(formInline.dataList.length-1) == index"
+                    type="plus-circle"/>
+            <a-icon class="icon-size"
+                    @click="deleteData"
+                    v-if="formInline.dataList.length > 1 && (formInline.dataList.length - 1) == index"
+                    type="minus-circle"/>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+  import { getAction, postAction, downloadFile } from '@/api/manage'
+
+  export default {
+    name: 'countryCardViewAd',
+    data() {
+      return {
+        visible: false,
+        confirmLoading: false,
+        formInline: {},
+        rules: {
+          personChargeName: [
+            {
+              required: true,
+              message: this.$t('personCharge') + this.$t('cannotEmpty'),
+              trigger: 'change'
+            },
+            {
+              max: 100,
+              message: this.$t('personCharge') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'change'
+            }
+          ],
+          problemLabel: [
+            {
+              required: true,
+              message: this.$t('problemLabel') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: this.$t('problemLabel') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
+        title: ''
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      add() {
+        this.visible = true
+        this.$nextTick(() => {
+          this.formInline = {}
+          this.formInline.dataList = [{
+            relatedSection: ''
+          }]
+          this.formInline = { ...this.formInline }
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      PersonnelSelectionChange(value, id) {
+        this.formInline[value] = id
+        this.formInline = { ...this.formInline }
+      },
+      handleOk() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      addData() {
+        this.formInline.dataList.push({
+          relatedSection: ''
+        })
+        this.formInline = { ...this.formInline }
+      },
+      deleteData() {
+        this.formInline.dataList.pop()
+        this.formInline = { ...this.formInline }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+  }
+
+  .title-text {
+    width: 84px;
+    text-align: right;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 42px;
+    line-height: 42px;
+  }
+
+  .box-input {
+    display: inline-block;
+    height: 38px;
+    width: 100%;
+  }
+
+  .itemModel {
+    width: calc(100% - 130px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .title-text-text {
+    margin-top: 9px;
+  }
+
+  .formAdd {
+    margin-bottom: 40px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  .icon-size {
+    font-size: 18px;
+    margin-top: 14px;
+    margin-right: 4px;
+  }
+</style>
\ No newline at end of file