Merge pull request #315 from WeBankPartners/dev_temp_select

Dev temp select

Author: pobu168

artifacts-ui/src/api/server.js

@@ -45,6 +45,9 @@ export const getCiTypeAttr = id => req.get(`/ci-types/${id}/attributes`)
 export const getSpecialConnector = () => req.get('/static-data/special-connector')
 export const getVariableRootCiTypeId = () => req.get('/getVariableRootCiTypeId')
 export const getEntitiesByCiType = (packageName, ci, data) => req.post(`/platform/v1/packages/${packageName}/entities/${ci}/retrieve`, data)
+// 获取cmdb中差异化变量
+export const getDiffVariable = (citype, data) => req.post(`/cidata/${citype}/query`, data)
+
 export const queryArtifactsList = (guid, data) => req.post(`/unit-designs/${guid}/packages/queryNexusDirectiry`, data)
 export const uploadArtifact = (guid, url, baselinePackage, packageType) => req.post(`/unit-designs/${guid}/packages/uploadNexusPackage?downloadUrl=${url}&baseline_package=${encodeURIComponent(baselinePackage)}&package_type=${encodeURIComponent(packageType)}`)
 

artifacts-ui/src/components/pkg-diff-variable.vue

@@ -60,14 +60,26 @@
     <div class="drawer-footer">
       <Button @click="openDrawer = false" type="primary">{{ $t('art_close') }}</Button>
     </div>
-    <Modal :mask-closable="false" v-model="isShowConfigKeyModal" :title="$t('artifacts_property_value_fill_rule')" @on-ok="setConfigRowValue" @on-cancel="closeConfigSelectModal">
-      <div style="display: flex">
-        <Input type="text" :placeholder="$t('artifacts_unselected')" v-model="customSearch"> </Input>
-        <Button type="primary" @click="remoteConfigSearch" :loading="remoteLoading">{{ $t('search') }}</Button>
+    <Modal :mask-closable="false" v-model="isShowConfigKeyModal" :fullscreen="fullscreen" width="900">
+      <p slot="header">
+        <span>{{ $t('art_copy_exist') }}</span>
+        <Icon v-if="!fullscreen" @click="zoomModalMax" class="header-icon" type="ios-expand" />
+        <Icon v-else @click="zoomModalMin" class="header-icon" type="ios-contract" />
+      </p>
+      <div slot="footer">
+        <Button type="text" @click="closeConfigSelectModal()">{{ $t('artifacts_cancel') }} </Button>
+        <Button type="primary" @click="setConfigRowValue()">{{ $t('art_ok') }} </Button>
+      </div>
+      <div style="display: flex;gap: 8px;margin-bottom: 8px;">
+        <Select style="width: 200px;" @on-change="remoteConfigSearch()" :placeholder="$t('artifacts_uploaded_by')" v-model="tempCopyParams.variable_type">
+          <Option v-for="item in ['GLOBAL', 'PRIVATE', 'ENCRYPTED', 'FILE']" :value="item" :key="item">{{ item }}</Option>
+        </Select>
+        <Input style="width: 200px;" v-model="tempCopyParams.variable_name" @on-change="remoteConfigSearch()" :placeholder="$t('art_variable_name')" clearable />
+        <Select style="width: 200px;" clearable filterable @on-change="remoteConfigSearch()" @on-clear="tempCopyParams.create_user = ''" :placeholder="$t('artifacts_uploaded_by')" v-model="tempCopyParams.create_user">
+          <Option v-for="user in userList" :value="user.username" :key="user.id">{{ user.username }}</Option>
+        </Select>
       </div>
-      <Select ref="ddrop" :disabled="!allDiffConfigs || allDiffConfigs.length === 0" filterable clearable v-model="currentConfigId" style="margin-top: 10px">
-        <Option v-for="conf in allDiffConfigs.filter(conf => conf.variable_value && conf.code !== currentConfigRow.key)" :value="conf.id" :key="conf.key_name">{{ conf.key_name }}</Option>
-      </Select>
+      <RuleTable :data="tempCopyTableData" ref="tempCopyTableRef" :columns="tempCopyColomns" :page="page" @reloadTableData="remoteConfigSearch" :maxHeight="fileContentHeight" :loading="remoteLoading"></RuleTable>
     </Modal>
     <Modal :mask-closable="false" v-model="isShowBatchBindModal" :width="800" :title="$t('multi_bind_config')">
       <Card>
@@ -103,10 +115,12 @@
 </template>
 
 <script>
-import { sysConfig, getSpecialConnector, getAllCITypesWithAttr, getPackageCiTypeId, getSystemDesignVersions, updateEntity, getPackageDetail, updatePackage, getVariableRootCiTypeId, getEntitiesByCiType } from '@/api/server.js'
+import { getUserList, sysConfig, getSpecialConnector, getAllCITypesWithAttr, getPackageCiTypeId, getSystemDesignVersions, updateEntity, getPackageDetail, updatePackage, getVariableRootCiTypeId, getEntitiesByCiType, getDiffVariable } from '@/api/server.js'
 import { setCookie, getCookie } from '../util/cookie.js'
 import axios from 'axios'
 import { decode } from 'js-base64'
+import RuleTable from './rule-table.vue'
+import { debounce } from 'lodash'
 // 业务运行实例ciTypeId
 const defaultAppRootCiTypeId = 'app_instance'
 const defaultDBRootCiTypeId = 'rdb_instance'
@@ -155,7 +169,6 @@ export default {
       packageId: '',
 
       customInputs: [],
-      customSearch: '',
       // -------------------
       // 差异化变量数据
       // -------------------
@@ -186,7 +199,6 @@ export default {
       isShowConfigKeyModal: false,
       isShowCiConfigModal: false,
       currentConfigRow: {},
-      allDiffConfigs: [],
       allCIConfigs: [],
       attrsTableColomnOptions: [
         {
@@ -315,7 +327,60 @@ export default {
       ],
       prefixType: 'variable_prefix_default', // 前缀
       tempTableData: [], // 通过类型、文件、前缀过滤后的展示数据
-      currentFileIndex: -1 // 缓存单签文件顺序
+      currentFileIndex: -1, // 缓存单签文件顺序
+      tempCopySelectRow: {
+        guid: ''
+      },
+      // 选择已有模版-开始
+      tempCopyColomns: [
+        {
+          title: '',
+          align: 'center',
+          width: 30,
+          render: (h, params) => {
+            return (
+              <Radio
+                value={params.row.guid === this.tempCopySelectRow.guid}
+                onInput={value => {
+                  this.selectTemp(params.row)
+                }}
+              ></Radio>
+            )
+          }
+        },
+        {
+          title: this.$t('art_variable_name'),
+          width: 200,
+          key: 'variable_name'
+        },
+        {
+          title: this.$t('art_value_rule'),
+          key: 'variable_value',
+          render: (h, params) => {
+            return <ArtifactsAutoFill style="margin-top:5px;" allCiTypes={this.ciTypes} specialDelimiters={this.specialDelimiters} rootCiTypeId="" isReadOnly={true} v-model={params.row.variable_value} cmdbPackageName={cmdbPackageName} />
+          }
+        },
+        {
+          title: this.$t('art_creator'),
+          width: 120,
+          key: 'create_user'
+        }
+      ],
+      tempCopyTableData: [],
+      page: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      tempCopyParams: {
+        variable_name: '',
+        create_user: '',
+        variable_type: 'GLOBAL'
+      },
+      userList: [],
+      // 选择已有模版-结束
+      fullscreen: false,
+      fileContentHeight: window.screen.availHeight * 0.4 + 100
     }
   },
   computed: {},
@@ -698,12 +763,6 @@ export default {
     renderConfigButton (params) {
       let row = params.row
       return [
-        // <Tooltip placement="top" max-width="200" content={this.$t('variable_select_key_tooltip')}>
-        //   <Button disabled={!!row.conf_variable.fixedDate} size="small" type="primary" style="margin-right:5px;margin-bottom:5px;" onClick={async () => this.showConfigKeyModal(row)}>
-        //     {this.$t('select_key')}
-        //   </Button>
-        // </Tooltip>,
-        // disable no dirty data or row is confirmed
         <Button disabled={!!(row.conf_variable.diffExpr === row.conf_variable.originDiffExpr || row.conf_variable.fixedDate)} size="small" type="info" style="margin-right:5px;margin-bottom:5px;" onClick={() => this.saveConfigVariableValue(row)}>
           {this.$t('artifacts_save')}
         </Button>
@@ -742,23 +801,81 @@ export default {
     cancelBatchBindOperation () {
       this.isShowBatchBindModal = false
     },
+    selectTemp (val) {
+      this.tempCopySelectRow = val
+    },
     async showConfigKeyModal (row) {
+      this.tempCopyParams = {
+        variable_name: '',
+        create_user: '',
+        variable_type: 'GLOBAL'
+      }
+      this.getUserList()
+      await this.remoteConfigSearch()
+      this.tempCopySelectRow = {
+        guid: ''
+      }
+      this.fullscreen = false
       this.isShowConfigKeyModal = true
       this.currentConfigRow = row
-      // }
-    },
-    async remoteConfigSearch () {
-      const query = this.customSearch
-      if (typeof query === 'string' && query.trim().length > 0) {
-        this.remoteLoading = true
-        const diffConfigs = await getEntitiesByCiType(cmdbPackageName, DIFF_CONFIGURATION, { criteria: {}, additionalFilters: [{ attrName: 'code', op: 'like', condition: query.trim() }] })
-        if (diffConfigs) {
-          this.allDiffConfigs = diffConfigs.data
-          this.$nextTick(() => {
-            this.$refs['ddrop'].toggleMenu(null, true)
-          })
-        }
-        this.remoteLoading = false
+    },
+    remoteConfigSearch: debounce(async function (
+      pageable = {
+        pageSize: 10,
+        currentPage: 1
+      }
+    ) {
+      this.remoteLoading = true
+      let params = {
+        dialect: {
+          queryMode: 'new'
+        },
+        filters: [],
+        pageable: {},
+        sorting: {
+          asc: false,
+          field: 'update_time'
+        },
+        paging: true
+      }
+      params.pageable.pageSize = pageable.pageSize
+      params.pageable.startIndex = (pageable.currentPage - 1) * this.page.pageSize
+
+      if (this.tempCopyParams.variable_name !== '') {
+        params.filters.push({
+          name: 'variable_name',
+          operator: 'contains',
+          value: this.tempCopyParams.variable_name
+        })
+      }
+      if (this.tempCopyParams.create_user) {
+        params.filters.push({
+          name: 'create_user',
+          operator: 'eq',
+          value: this.tempCopyParams.create_user
+        })
+      }
+      if (this.tempCopyParams.variable_type) {
+        params.filters.push({
+          name: 'variable_type',
+          operator: 'eq',
+          value: this.tempCopyParams.variable_type
+        })
+      }
+
+      const diffConfigs = await getDiffVariable(DIFF_CONFIGURATION, params)
+      if (diffConfigs) {
+        this.tempCopyTableData = diffConfigs.data.contents
+        this.page.total = diffConfigs.data.pageInfo.totalRows
+        this.page.currentPage = pageable.currentPage
+        this.$refs.tempCopyTableRef.setPage(this.page)
+      }
+      this.remoteLoading = false
+    }, 300),
+    async getUserList () {
+      let { status, data } = await getUserList()
+      if (status === 'OK') {
+        this.userList = data || []
       }
     },
     handleCIConfigChange (code) {
@@ -805,18 +922,14 @@ export default {
       }
     },
     setConfigRowValue () {
-      if (this.currentConfigId) {
-        const tmp = this.currentDiffConfigTab === this.constPackageOptions.db ? 'db_diff_conf_file' : 'diff_conf_file'
-        this.packageDetail[tmp].forEach(elFile => {
-          elFile.configKeyInfos.forEach(elFileVar => {
-            if (this.currentConfigRow.key.toLowerCase() === elFileVar.key.toLowerCase()) {
-              const tmp = this.allDiffConfigs.find(item => item.id === this.currentConfigId)
-              elFileVar.conf_variable.diffExpr = tmp.variable_value
-            }
-          })
+      const tmp = this.currentDiffConfigTab === this.constPackageOptions.db ? 'db_diff_conf_file' : 'diff_conf_file'
+      this.packageDetail[tmp].forEach(elFile => {
+        elFile.configKeyInfos.forEach(elFileVar => {
+          if (this.currentConfigRow.key.toLowerCase() === elFileVar.key.toLowerCase()) {
+            elFileVar.conf_variable.diffExpr = this.tempCopySelectRow.variable_value
+          }
         })
-        // this.$set(this.packageDetail.diff_conf_variable[this.currentConfigRow._index], 'diffExpr', this.currentConfigValue)
-      }
+      })
       this.closeConfigSelectModal()
     },
     setCIConfigRowValue () {
@@ -841,8 +954,7 @@ export default {
       this.currentConfigValue = ''
       this.isShowConfigKeyModal = false
       this.currentConfigRow = {}
-      this.customSearch = ''
-      this.allDiffConfigs = []
+      this.tempCopyTableData = []
     },
     closeCIConfigSelectModal () {
       this.currentConfigValue = ''
@@ -902,13 +1014,25 @@ export default {
     },
     handleResize () {
       this.maxHeight = window.innerHeight - 290
+    },
+
+    // #endregion
+    zoomModalMax () {
+      this.fileContentHeight = window.screen.availHeight - 410
+      this.fullscreen = true
+    },
+    zoomModalMin () {
+      this.fileContentHeight = window.screen.availHeight * 0.4 + 100
+      this.fullscreen = false
     }
   },
   created () {
     this.fetchData()
     this.getSpecialConnector()
   },
-  components: {}
+  components: {
+    RuleTable
+  }
 }
 </script>