From 7ae3d108dc3c697533eaae3794110407c46daacf Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Wed, 3 Aug 2022 15:34:28 +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             |   4 +
 jero-web/src/common/lang/zh-cn.js             |   4 +
 .../classificationMaintenanceAdd.vue          |   2 +-
 .../components/countryCardRelease.vue         | 293 +++++++++++++++++-
 .../components/countryCardReleaseModel.vue    | 210 +++++++++++++
 .../components/countryCardReleaseModelAdd.vue | 256 +++++++++++++++
 .../components/countryCardView.vue            |   1 +
 .../components/problemKnowledgeBaseView.vue   |   1 +
 8 files changed, 768 insertions(+), 3 deletions(-)
 create mode 100644 jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModel.vue
 create mode 100644 jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue

diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 708ff3cea..935e965bb 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -1226,4 +1226,8 @@ module.exports = {
   addLabel:'Add Label',
   editLabel:'Edit Label',
   applicableMarket:'Applicable market',
+  templateMaintenance:'Template maintenance',
+  associatedWebsite:'Associated website',
+  dropDownOptions:'Drop down options',
+  dropDownOptionMaintenance:'Drop down option maintenance',
 }
\ 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 e537f5564..132493ef4 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -1329,4 +1329,8 @@ module.exports = {
   addLabel:'新增标签',
   editLabel:'编辑标签',
   applicableMarket:'适用市场',
+  templateMaintenance:'模板维护',
+  associatedWebsite:'关联网址',
+  dropDownOptions:'下拉选项',
+  dropDownOptionMaintenance:'下拉选项维护',
 }
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/classificationMaintenanceAdd.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/classificationMaintenanceAdd.vue
index e86ce4846..5efb6b6bd 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/classificationMaintenanceAdd.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/classificationMaintenanceAdd.vue
@@ -48,7 +48,7 @@
 
 <script>
   import PersonnelSelection from '@/components/PersonnelSelection/index'
-
+  import { getAction, postAction, downloadFile } from '@/api/manage'
   export default {
     name: 'classificationMaintenanceAdd',
     components: {
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
index a4c3a577c..3ccdc4ab9 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
@@ -6,20 +6,246 @@
            <span style="line-height: 66px;display: inline-block;float: left">
              <a-icon type="arrow-left" style="margin-right: 6px;"/>
            </span>
-          {{$t('applicableInstructionsMarketList')}}
+          {{$t('managePublishing')}}
         </div>
       </div>
       <div style="padding-top: 68px;background: #fff">
         <div class="detail-content" style="padding: 24px">
+          <div class="table-page-search-wrapper">
+            <a-form layout="inline" @keyup.enter.native="searchQuery">
+              <a-row :gutter="24">
+                <a-col :md="6" :sm="8">
+                  <div class="box-title-text">
+                    <div class="title-text" :title="$t('applicableMarket')">
+                      <span>{{$t('applicableMarket')}}</span>
+                    </div>
+                    <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('applicableMarket')"
+                             v-model="queryParam.applicableMarket"></a-input>
+                  </div>
+                </a-col>
+                <a-col :md="6" :sm="8">
+                  <div class="box-title-text">
+                    <div class="title-text" :title="$t('releaseStatus')">
+                      <span>{{$t('releaseStatus')}}</span>
+                    </div>
+                    <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('releaseStatus')"
+                             v-model="queryParam.releaseStatus"></a-input>
+                  </div>
+                </a-col>
+                <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+               </a-col>
+               </span>
+              </a-row>
+            </a-form>
+          </div>
+          <div class="box-content-right">
+            <div @click="BatchDeleteClick" class="operator-text">
+              <a-icon type="delete"/>
+              {{$t('BatchDelete')}}
+            </div>
+            <div @click="templateMaintenanceClick" class="operator-text">
+              <a-icon type="carry-out"/>
+              {{$t('templateMaintenance')}}
+            </div>
+            <div @click="newlyAddedClick" class="operator-text">
+              <a-icon type="plus"/>
+              {{$t('newlyAdded')}}
+            </div>
+          </div>
+          <div>
+            <a-table
+              ref="table"
+              size="middle"
+              :loading="loading"
+              :pagination="false"
+              :scroll="{x: '100%'}"
+              rowKey="id"
+              :data-source="dataSource"
+              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+              :columns="columns"
+            >
+               <span slot="operation" slot-scope="text,record">
+                <a class="text-operation" @click="viewClick(record)">{{$t('view')}}</a>
+                 <a class="text-operation"
+                    @click="subscribe(record)">
+                  {{!record.releaseCondition || record.releaseCondition == 'draft' ? $t('release') :$t('withdraw')}}
+                 </a>
+                <a class="text-operation"
+                   @click="edit(record)">{{$t('edit')}}</a>
+                <a class="text-operation"
+                   @click="deleteData(record)">{{$t('delete')}}</a>
+                </span>
+            </a-table>
+            <div class="page" v-if="dataSource && dataSource.length > 0">
+              <a-pagination
+                :show-total="total => $t('total')+` ${total} `+$t('strip')"
+                show-quick-jumper
+                show-size-changer
+                :page-size.sync="pageSize"
+                :total="total"
+                :current="pageNo"
+                @change="pageOnChange"
+                @showSizeChange="SizeChange"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <countryCardReleaseModel ref="countryCardReleaseModelRef"/>
   </div>
 </template>
 
 <script>
+  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+  import countryCardReleaseModel from './countryCardReleaseModel'
+
   export default {
-    name: 'countryCardRelease'
+    name: 'countryCardRelease',
+    components: {
+      countryCardReleaseModel
+    },
+    data() {
+      return {
+        queryParam: {},
+        loading: false,
+        dataSource: [{}],
+        total: 0,
+        pageSize: 10,
+        pageNo: 1,
+        url: {
+          list: '',
+          deleteBatch: ''
+        },
+        selectedRowKeys: [],
+        columns: [
+          {
+            title: this.$t('applicableMarket'),
+            align: 'center',
+            dataIndex: 'applicableMarket',
+            ellipsis: true
+          },
+          {
+            title: this.$t('releaseStatus'),
+            align: 'center',
+            dataIndex: 'releaseStatus',
+            ellipsis: true
+          },
+          {
+            title: this.$t('operation'),
+            align: 'center',
+            fixed: 'right',
+            width: 260,
+            scopedSlots: { customRender: 'operation' }
+          }
+        ]
+      }
+    },
+    mounted() {
+      document.title = 'Country Card-' + this.$t('managePublishing')
+    },
+    methods: {
+      searchQuery() {
+        this.pageNo = 1
+        this.getList()
+      },
+      searchReset() {
+        this.queryParam = {}
+        this.pageNo = 1
+        this.getList()
+      },
+      pageOnChange(page) {
+        this.pageNo = page
+        this.getList()
+      },
+      SizeChange(pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.getList()
+      },
+      getList() {
+        let queryParam = JSON.parse(JSON.stringify(this.queryParam))
+        Object.keys(queryParam).forEach(val => {
+          if (queryParam[val] instanceof Array) {
+            queryParam[val] = queryParam[val].join(',')
+          }
+        })
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize,
+          ...queryParam
+        }
+        this.loading = true
+        getAction(this.url.list, query).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+      onSelectChange(value) {
+        this.selectedRowKeys = value
+      },
+      newlyAddedClick() {
+
+      },
+      templateMaintenanceClick() {
+        this.$refs.countryCardReleaseModelRef.getData()
+      },
+      BatchDeleteClick() {
+        if (this.selectedRowKeys.length > 0) {
+          let _this = this
+          this.$confirm({
+            content: _this.$t('ConfirmBatchDeletion'),
+            onOk() {
+              let idList = JSON.parse(JSON.stringify(_this.selectedRowKeys))
+              getAction(_this.url.deleteBatch, { ids: idList.join(',') }).then((res) => {
+                if (res.success) {
+                  _this.$message.success(_this.$t('OperationSuccessful'))
+                  _this.selectedRowKeys = []
+                  _this.getList()
+                } else {
+                  _this.$message.warning(res.message)
+                }
+              })
+            }
+          })
+        } else {
+          this.$message.warning(this.$t('selectLeastOne'))
+        }
+      },
+      edit() {
+
+      },
+      subscribe() {
+
+      },
+      viewClick() {
+
+      },
+      deleteData(val) {
+        let _this = this
+        this.$confirm({
+          content: _this.$t('ConfirmDelete'),
+          onOk() {
+            deleteAction(_this.url.deleteBatch, { ids: val.id }).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.getList()
+              } else {
+                _this.$message.warning(res.message)
+              }
+            })
+          }
+        })
+      }
+    }
   }
 </script>
 
@@ -84,4 +310,67 @@
       }
     }
   }
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 20%;
+    min-width: 110px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+
+  .box-content-right {
+    width: 100%;
+    text-align: right;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .operator-text {
+    cursor: pointer;
+    margin-right: 53px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+  }
+
+  .operator-text:last-child {
+    margin-right: 13px;
+  }
+
+  .text-operation {
+    margin-right: 8px;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModel.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModel.vue
new file mode 100644
index 000000000..986380fcd
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModel.vue
@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <a-drawer
+      :title="$t('templateMaintenance')"
+      :maskClosable="false"
+      :width="1000"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible"
+      style="height: 100%;overflow: auto;padding-bottom: 53px;">
+      <div style="margin-bottom: 60px">
+        <div class="box-title">
+          <div @click="addLabelClick" class="operator-text">
+            <a-icon type="plus"/>
+            {{$t('newlyAdded')}}
+          </div>
+        </div>
+        <a-table
+          :columns="columns"
+          :scroll="{x: '100%',y:'calc(100vh - 300px)'}"
+          :data-source="dataList"
+          :pagination="false"
+          :loading="loading">
+           <span slot="operation" slot-scope="text,record">
+              <a style="margin-right: 8px" @click="edit(record)">{{$t('edit')}}</a>
+              <a @click="deleteData">{{$t('delete')}}</a>
+           </span>
+        </a-table>
+        <div class="page" v-if="dataList.length > 0">
+          <a-pagination
+            :show-total="total => $t('total')+`${total}`+$t('strip')"
+            show-quick-jumper
+            show-size-changer
+            :page-size.sync="pageSize"
+            :total="total"
+            :current="pageNo"
+            @change="onChange"
+            @showSizeChange="SizeChange"
+          />
+        </div>
+      </div>
+
+      <div class="drawer-bootom-button">
+        <a-button @click="handleCancel" type="danger">{{$t('cancel')}}</a-button>
+      </div>
+    </a-drawer>
+    <countryCardReleaseModelAdd ref="countryCardReleaseModelAddRef"
+                                @countryCardReleaseModelAddForm="countryCardReleaseModelAddForm"/>
+  </div>
+</template>
+
+<script>
+  import { getAction, postAction, downloadFile,deleteAction } from '@/api/manage'
+  import countryCardReleaseModelAdd from './countryCardReleaseModelAdd'
+
+  export default {
+    name: 'countryCardReleaseModel',
+    components: {
+      countryCardReleaseModelAdd
+    },
+    data() {
+      return {
+        url: {
+          list: '',
+          deleteOne: ''
+        },
+        visible: false,
+        selectedRowKeys: [],
+        dataList: [{}],
+        loading: false,
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        columns: [
+          {
+            title: this.$t('LabelName'),
+            dataIndex: 'LabelName',
+            align: 'center',
+            ellipsis: true,
+            width: 200
+          },
+          {
+            title: this.$t('LabelType'),
+            dataIndex: 'LabelType',
+            align: 'center',
+            ellipsis: true,
+            width: 200
+          },
+          {
+            title: this.$t('DisplayOrder'),
+            dataIndex: 'DisplayOrder',
+            align: 'center',
+            ellipsis: true,
+            width: 160
+          },
+          {
+            title: this.$t('operation'),
+            align: 'center',
+            fixed: 'right',
+            width: 180,
+            scopedSlots: { customRender: 'operation' }
+          }
+        ]
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      getData() {
+        this.visible = true
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.replacePage()
+      },
+      countryCardReleaseModelAddForm() {
+        this.pageNo = 1
+        this.replacePage()
+      },
+      addLabelClick() {
+        this.$refs.countryCardReleaseModelAddRef.add()
+      },
+      edit(val) {
+        this.$refs.countryCardReleaseModelAddRef.edit(JSON.parse(JSON.stringify(val)))
+      },
+      deleteData(val) {
+        let _this = this
+        this.$confirm({
+          content: _this.$t('ConfirmDelete'),
+          onOk() {
+            deleteAction(_this.url.deleteOne, { id: val.id }).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.getList()
+              } else {
+                _this.$message.warning(_this.$t('operationFailed'))
+              }
+            })
+          }
+        })
+      },
+      classificationMaintenanceAddForm() {
+        this.pageNo = 1
+        this.replacePage()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.replacePage()
+      },
+      replacePage() {
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize
+        }
+        this.loading = true
+        postAction(this.url.list, query).then((res) => {
+          if (res.success) {
+            this.dataList = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.dataList = []
+            this.total = 0
+            this.loading = false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 100;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .box-title {
+    width: 100%;
+    text-align: right;
+    margin-bottom: 20px;
+  }
+
+  .operator-text {
+    cursor: pointer;
+    margin-right: 13px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue
new file mode 100644
index 000000000..a4e39ccb8
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue
@@ -0,0 +1,256 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="700"
+    :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('LabelName')">{{$t('LabelName')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="LabelName">
+              <a-input class="box-input"
+                       :disabled="disabled"
+                       v-model="formInline.LabelName"
+                       :placeholder="$t('PleaseEnter')+$t('LabelName')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <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('LabelType')">{{$t('LabelType')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="LabelType">
+              <a-input class="box-input"
+                       :disabled="disabled"
+                       v-model="formInline.LabelType"
+                       :placeholder="$t('PleaseEnter')+$t('LabelType')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <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('dropDownOptions')">{{$t('dropDownOptions')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="dropDownOptions">
+              <a-button class="submit" @click="dropDownOptionsClick" type="primary">
+                {{$t('dropDownOptionMaintenance')}}
+              </a-button>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <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('DisplayOrder')">{{$t('DisplayOrder')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="DisplayOrder">
+              <a-input-number class="box-input"
+                              :disabled="disabled"
+                              v-model="formInline.DisplayOrder"
+                              :placeholder="$t('PleaseEnter')+$t('DisplayOrder')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="title-text-text"
+                    :title="$t('associatedWebsite')">{{$t('associatedWebsite')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="associatedWebsite">
+              <a-input class="box-input"
+                       :disabled="disabled"
+                       v-model="formInline.associatedWebsite"
+                       :placeholder="$t('PleaseEnter')+$t('associatedWebsite')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="title-text-text"
+                    :title="$t('describe')">{{$t('describe')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="describe">
+              <a-textarea
+                :placeholder="$t('PleaseEnter')+$t('describe')"
+                :disabled="disabled"
+                v-model="formInline.describe" :rows="4"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+  import { getAction, postAction, downloadFile } from '@/api/manage'
+
+  export default {
+    name: 'countryCardReleaseModelAdd',
+    data() {
+      return {
+        visible: false,
+        disabled: false,
+        confirmLoading: false,
+        formInline: {},
+        rules: {
+          LabelName: [
+            {
+              required: true,
+              message: this.$t('personCharge') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: this.$t('personCharge') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          LabelType: [
+            {
+              required: true,
+              message: this.$t('problemLabel') + this.$t('cannotEmpty'),
+              trigger: 'change'
+            }
+          ],
+          DisplayOrder: [
+            {
+              required: true,
+              message: this.$t('DisplayOrder') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            }
+          ],
+          associatedWebsite: [
+            {
+              max: 100,
+              message: this.$t('associatedWebsite') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          describe: [
+            {
+              max: 300,
+              message: this.$t('describe') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
+        title: ''
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      add() {
+        this.visible = true
+        this.title = this.$t('addLabel')
+        this.$nextTick(() => {
+          this.formInline = {}
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      edit(data) {
+        this.visible = true
+        this.title = this.$t('editLabel')
+        this.$nextTick(() => {
+          this.formInline = data
+          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
+      }
+    }
+  }
+</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;
+  }
+
+  .submit {
+    height: 38px;
+  }
+</style>
\ 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 746eecdc3..75be6e28d 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
@@ -18,6 +18,7 @@
 </template>
 
 <script>
+  import { getAction, postAction, downloadFile } from '@/api/manage'
   export default {
     name: 'countryCardView'
   }
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue
index e7fac987f..2d85b178d 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue
@@ -107,6 +107,7 @@
 
 <script>
   import viewFileModel from '@/components/viewFileModel/index'
+  import { getAction, postAction, downloadFile } from '@/api/manage'
 
   export default {
     name: 'problemKnowledgeBaseView',