.

src/components/businessMoudle/gdtList/indicators/index.vue

@@ -1,45 +1,211 @@
 <template>
-  <el-dialog class="gdt-dialog" v-model="dialogVisible" :show-close="false" width="1098">
+  <el-dialog class="gdt-dialog" v-model="dialogVisible" :destroy-on-close="true" :show-close="false" width="1098" top="60px">
     <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
         <h4 :id="titleId" :class="titleClass">自定义指标</h4>
       </div>
     </template>
     <div class="container">
-      <div>主要内容</div>
+      <el-input v-model.trim="keyword" @input="searchInput" clearable class="seachWrap" placeholder="输入指标名称搜索">
+        <template #append>
+          <el-icon>
+            <Search />
+          </el-icon>
+        </template>
+      </el-input>
+      <div class="indicator-wrapper">
+        <div class="indicator-side">
+          <div :class="['indicator-category', item.key_value == selectSideBlock ? 'indicator-category--active' : '']"
+            v-for="item in indicatorList" @click="onClickSide(item)">{{ item.label }}</div>
+        </div>
+        <div class="indicator-body">
+          <el-checkbox-group v-model="checkList" size="default" @change="changeSelect">
+            <div class="indicator-block" :id="`indicators_parend_${item.key_value}`" v-for="item in indicatorList">
+              <div class="indicator-group"><span>{{ item.label }}</span></div>
+              <el-row :gutter="1">
+                <el-col :span="8" v-for="child_item in item.child">
+                  <el-checkbox class="checkbox-item" :label="child_item.key_value" :disabled="child_item.disabled == 1">{{
+                    child_item.label }}</el-checkbox>
+                </el-col>
+              </el-row>
+            </div>
+          </el-checkbox-group>
+        </div>
+      </div>
     </div>
     <div class="indicator-drag">
       <div class="indicator-content">
         <div class="drag-title">已选指标</div>
         <div class="drag-sec">拖动可自定义指标顺序</div>
         <div class="indicator-limit_low">
-          <div class="drag-block">账户ID</div>
+          <div class="drag-block" v-for="item in disabledCheck">{{ item.label }}</div>
         </div>
         <div class="drag-sepreate">以上指标将横向固定</div>
       </div>
       <div class="indicator-limit-many">
-        <div class="drag-block">媒体QQ</div>
-        <div class="drag-block">媒体QQ</div>
-        <div class="drag-block">媒体QQv</div>
+        <div class="drag-block mg2" v-for="item in checkAllList">{{ item.label }}</div>
       </div>
     </div>
     <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
-          Confirm
-        </el-button>
-      </span>
+      <div class="dialog-footer flex_between">
+        <div class="flex flex_1">
+          <el-checkbox style="width:160px;margin-left: 20px;" v-model="saveIndicators" label="保存为常用自定义指标"
+            size="default" />
+          <el-input v-if="saveIndicators" style="width:260px;margin-left: 8px;" v-model.trim="name"
+            placeholder="请输入自定义指标名"></el-input>
+        </div>
+        <div style="margin-right:30px;">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitEvent">应用</el-button>
+        </div>
+      </div>
     </template>
+
   </el-dialog>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { getAdDefaultKpis } from './ts/api'
+import { getAdDefaultKpis, getAdKpisDetails, getAdKpisTemplateSave } from './ts/api'
+import { ElLoading, ElMessage } from 'element-plus';
+import _ from 'lodash';
+
+const emit = defineEmits<{
+  (event: "saveSuccess", value?: any): void;
+}>();
 
 const dialogVisible = ref<boolean>(false)
-const initFun = (visible) => {
+const adType = ref<"media_base" | "campaign_base" | "ad_base" | "creative_base">('media_base')
+const keyword = ref<string>('')
+const indicatorList = ref<any[]>([])
+const copyIndicatorList = ref<any[]>([])
+const checkList = ref<any[]>([])//选中指标的key_value
+const checkAllList = ref<any[]>([])//携带所有选中指标的信息
+const disabledCheck = ref<any[]>([])
+const selectSideBlock = ref()
+const saveIndicators = ref(false)
+const name = ref('')
+
+/**点击应用 */
+const submitEvent = () => {
+  if(saveIndicators.value && (name.value == '' || !name.value)){
+    ElMessage.warning('请输入自定义指标名')
+    return;
+  }
+  if(checkList.value.length == 0){
+    ElMessage.warning('请选择自定义指标')
+    return
+  }
+  getAdKpisTemplateSave({
+    temp_type: saveIndicators.value ? 2 : 1,
+    name: saveIndicators.value ? name.value : '',
+    kpis: checkList.value,
+    type: adType.value
+  }).then((res)=>{
+    console.log('保存成功！', res)
+    ElMessage.success('保存成功！')
+    dialogVisible.value = false;
+    emit('saveSuccess', {
+      type: adType.value
+    })
+  })
+}
+
+/**模糊搜索 */
+const searchInput = () => {
+  if (keyword.value && keyword.value != '') {
+    let arr: any[] = []
+    copyIndicatorList.value.forEach((item_main) => {
+      let item = _.cloneDeep(item_main)
+      item.child.forEach((child_item) => {
+        if (child_item.label.indexOf(keyword.value) != -1) {
+          let flag_arr = arr.filter((v) => { return v.key_value == item.key_value })
+          if (flag_arr.length > 0) {
+            flag_arr[0].child.push(child_item)
+          } else {
+            arr.push(Object.assign(item, { child: [child_item] }))
+          }
+        }
+      })
+    })
+    indicatorList.value = arr;
+  } else {
+    indicatorList.value = _.cloneDeep(copyIndicatorList.value)
+  }
+}
+
+/**点击左侧 侧边  */
+const onClickSide = (info) => {
+  selectSideBlock.value = info.key_value;
+
+  const moduleElement = document.getElementById(`indicators_parend_${info.key_value}`);
+  if (moduleElement) {
+    moduleElement.scrollIntoView({ behavior: 'smooth' });
+  }
+}
+const changeSelect = () => {
+  let str_disabled = disabledCheck.value.map((v) => {
+    return v.key_value
+  })
+  checkAllList.value = []
+  checkList.value.forEach((key_value) => {
+    indicatorList.value.forEach((item) => {
+      let filter_arr = item.child.filter((v) => { return v.key_value == key_value })
+      if (filter_arr.length > 0 && str_disabled.indexOf(key_value) == -1) {
+        checkAllList.value.push(filter_arr[0])
+      }
+    });
+  })
+}
+
+/**初始化 */
+const initFun = (visible, type, temp_id) => {
   dialogVisible.value = visible
+  adType.value = type
+  if (visible) {
+    const loading = ElLoading.service({
+      lock: true,
+      text: '加载中',
+      background: 'rgba(255,255,255,0.6)',
+    })
+    getAdDefaultKpis({
+      type: adType.value
+    }).then((res: any) => {
+      if (Array.isArray(res)) {
+        saveIndicators.value = false;
+        name.value = '';
+        indicatorList.value = res;
+        copyIndicatorList.value = _.cloneDeep(res)
+        if (res.length > 0) {
+          selectSideBlock.value = res[0].key_value;
+        }
+        disabledCheck.value = []
+        indicatorList.value.forEach((item) => {
+          item.child.forEach((v_item) => {
+            if (v_item.disabled == 1) {
+              disabledCheck.value.push(v_item)
+            }
+          });
+        });
+        // 获取选中值
+        getAdKpisDetails({
+          type: adType.value,
+          temp_id: temp_id ? temp_id : ''
+        }).then((kpis_res: any) => {
+          loading.close()
+          if (kpis_res.kpis) {
+            checkList.value = kpis_res.kpis.split(',')
+            changeSelect()
+          }
+        }).catch(() => {
+          loading.close()
+        })
+      } else {
+        loading.close()
+      }
+    }).catch(() => {
+      loading.close()
+    })
+  }
 }
 // 暴露自己的属性供父组件使用
 defineExpose({
@@ -47,8 +213,188 @@ defineExpose({
 });
 </script>
 <style lang="scss" scoped>
-.container{
+.gdt-dialog .el-dialog__header .el-dialog__title {
+  padding-left: 10px !important;
+}
+
+.container {
   min-height: 300px;
-  background: red;
+  width: calc(100% - 190px);
+}
+
+.seachWrap {
+  width: 300px;
+  margin: 15px 0;
+}
+
+.indicator-wrapper {
+  display: flex;
+  width: 100%;
+  height: 60vh;
+  border: 1px solid #eaebec;
+  border-radius: 4px;
+}
+
+.indicator-side {
+  flex-shrink: 0;
+  width: 160px;
+  overflow: auto;
+  border-right: 1px solid #eaebec;
+
+  .indicator-category {
+    padding-left: 16px;
+    font-size: 14px;
+    line-height: 40px;
+    color: #333;
+    cursor: pointer;
+  }
+
+  .indicator-category--active {
+    color: #197afb;
+    background-color: #d6eaff;
+  }
+}
+
+.indicator-body {
+  flex: 1;
+  overflow: auto;
+  scroll-behavior: smooth;
+
+  .indicator-block {
+    padding: 16px 0 6px 24px;
+    border-bottom: 1px solid #eaebec;
+
+    .indicator-group {
+      display: flex;
+      justify-content: flex-start;
+      line-height: 20px;
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: #444;
+      font-weight: bold;
+    }
+
+    .checkbox-item {}
+  }
+}
+
+.indicator-drag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  flex-shrink: 0;
+  width: 216px;
+  // height: 676px;
+  padding: 25px 0 10px 0px;
+  overflow: auto;
+  background-color: #f8f8f9;
+  border-right: 1px solid #eaebec;
+
+  .indicator-content {
+    padding: 0 16px;
+  }
+
+  .drag-title {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 100%;
+    color: #333;
+  }
+
+  .drag-sec {
+    margin: 8px 0;
+    font-size: 12px;
+    line-height: 100%;
+    color: #999;
+  }
+
+  .drag-sepreate {
+    position: relative;
+    margin: 16px 0 0;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+
+    &::before {
+      position: absolute;
+      top: 9px;
+      left: 0;
+      width: 32px;
+      height: 1px;
+      content: "";
+      background-color: #e8eaec;
+    }
+
+    &::after {
+      position: absolute;
+      top: 9px;
+      right: 0;
+      width: 32px;
+      height: 1px;
+      content: "";
+      background-color: #e8eaec;
+    }
+  }
+
+  .indicator-limit-many {
+    max-height: 445px;
+    padding: 0 16px;
+    margin-top: 16px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .drag-block {
+    position: relative;
+    width: 184px;
+    height: 40px;
+    padding: 0 30px 0 36px;
+    overflow: hidden;
+    line-height: 40px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: #fff;
+    border-bottom: 1px solid #e8eaec;
+
+    &::before {
+      position: absolute;
+      top: 16px;
+      left: 12px;
+      width: 16px;
+      height: 2px;
+      content: "";
+      background-color: #999;
+    }
+
+    &::after {
+      position: absolute;
+      bottom: 16px;
+      left: 12px;
+      width: 16px;
+      height: 2px;
+      content: "";
+      background-color: #999;
+    }
+  }
+}
+
+.mg2 {
+  margin-bottom: 2px;
+}
+
+.el-checkbox {
+  color: #444;
+  --el-checkbox-font-size: 13px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.el-checkbox__label) {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>

src/components/businessMoudle/gdtList/indicators/ts/api.ts

@@ -1,9 +1,11 @@
 import http from '@/http/http'
 import { ElMessage } from "element-plus";
-
-/**保存常用/自定义指标模板 */
-interface IAdKpisTemplateSave {
+//基本接口
+interface IType {
   type: 'media_base' | 'campaign_base' | 'ad_base' | 'creative_base',
+}
+/**保存常用/自定义指标模板 */
+interface IAdKpisTemplateSave extends IType {
   temp_type: 1 | 2,
   name?: string,
   kpis: any[]
@@ -21,12 +23,42 @@ export function getAdKpisTemplateSave(params: IAdKpisTemplateSave) {
 }
 
 /**获取所有可选指标 */
-interface IAdDefaultKpis {
-  type: 'media_base' | 'campaign_base' | 'ad_base' | 'creative_base',
+interface IAdDefaultKpis extends IType {
 }
 export function getAdDefaultKpis(params: IAdDefaultKpis) {
   return new Promise( async (resolve, reject) => {
     const res: any = await http.get('/api/ad/adDefaultKpis', params)
+    if (res.errNo == 0 && Array.isArray(res.rst)) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}
+
+/**获取常用模板下拉 */
+interface IGetAdKpisTemplate  extends IType{
+}
+export function getAdKpisTemplate(params: IGetAdKpisTemplate) {
+  return new Promise( async (resolve, reject) => {
+    const res: any = await http.get('/api/ad/getAdKpisTemplate', params)
+    if (res.errNo == 0 && Array.isArray(res.rst)) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}
+
+/**获取常用模板下拉 */
+interface IGetAdKpisDetails extends IType{
+  temp_id?: string
+}
+export function getAdKpisDetails(params: IGetAdKpisDetails) {
+  return new Promise( async (resolve, reject) => {
+    const res: any = await http.get('/api/ad/getAdKpisDetails', params)
     if (res.errNo == 0 && res.rst) {
       resolve(res.rst)
     } else {

src/components/businessMoudle/gdtList/plan.vue

@@ -142,7 +142,7 @@
 
   <EditIpt ref="planEditIptRef" title="推广计划" @confirm="planEditConfirm"></EditIpt>
   <TargetEdit ref="TargetEditRef" title="计划设置" @confirm="init"></TargetEdit>
-
+  <Indicators ref="IndicatorsRef"></Indicators>
 </template>
 <script setup lang="ts">
 import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
@@ -158,6 +158,7 @@ import {listTs} from "@/components/businessMoudle/gdtList/ts/list.ts";
 import {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
 import {batchGdt_edit, batchGdt_list, reactiveTableAndAny} from "@/api/ApiModel";
+import Indicators from './indicators/index.vue'
 
 const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
@@ -247,8 +248,9 @@ const dropdownEvent = (val: string | number | object) => {
 }
 
 //自定义指标
+const IndicatorsRef = ref()
 const customIndEvent = () => {
-
+  IndicatorsRef.value?.initFun(true, 'media_base')
 }
 
 //修改计划