visualization-design/src/views/components/PenStatus.vue

<template>
  <div class="props">
    <div v-if="props.pen.triggers && props.pen.triggers.length">
      <div
        class="flex between tigger-item"
        v-for="(trigger, i) in props.pen.triggers"
        :value="i"
      >
        <t-input
          style="width: 190px; margin-left: 20px"
          v-model="trigger.name"
          :placeholder="$t('状态场景名')"
        />
        <div class="flex operation">
          <div class="icon-box icon-item-box" @click="onEditTrigger(trigger)">
            <Edit2Icon />
          </div>
          <t-popconfirm :content="$t('确认删除这条状态场景吗？')" placement="bottom" @confirm="delTrigger(i)">
            <div class="icon-box">
              <DeleteIcon />
            </div>
          </t-popconfirm>
        </div>
      </div>
    </div>
    <div class="flex column center blank" v-else>
      <img src="/img/blank.png">
      <div class="gray center">{{$t('还没有状态场景')}}</div>
      <!-- <div class="mt-8">
        <t-button style="height: 30px" @click="onAddTrigger">
          添加状态
        </t-button>
      </div> -->
    </div>
    <div class="flex center mt-8">
      <t-button style="height: 30px; width: 90%; margin: 12px" @click="onAddTrigger">
        {{$t('添加状态场景')}}
      </t-button>
    </div>
  </div>
  <t-drawer
    v-model:visible="drawer.visible"
    :footer="false"
    :header="drawer.header"
    :size="'800px'"
  >
    <div v-if="trigger">
      <t-collapse
        v-model="openedCollapses"
        :borderless="true"
        :expand-on-row-click="true"
      >
        <t-collapse-panel v-for="(state, i) in trigger.status" :value="i">
          <template #header>
            <t-input v-model="state.name" style="width:90%" @click="panelInputClick($event)" :placeholder="$t('状态名')"></t-input>
          </template>
          <template #headerRightContent>
            <t-space size="small" @click.stop>
              <t-popconfirm placement="left" @confirm="trigger.status.splice(i, 1)" :content="$t('确认删除该状态吗？')">
                <delete-icon class="hover"></delete-icon>
              </t-popconfirm>
            </t-space>
          </template>
          <!-- <Conditions :key="temCKey" :data="state" /> -->
          <div class="props">
            <div v-if="state.conditions && state.conditions.length > 0" class="form-item banner">
              <label>{{$t('满足条件')}}</label>
              <div class="w-full flex middle between">
                <div></div>
                <t-radio-group class="ml-8" v-model="state.conditionType">
                  <t-radio value="and"> {{$t('所有')}} </t-radio>
                  <t-radio value="or"> {{$t('任意')}} </t-radio>
                </t-radio-group>
              </div>
            </div>
            <div v-for="(c, index) in state.conditions" class="mb-12">
              <div class="flex middle between" style="margin-top:10px;">
                <div class="flex middle">
                  <arrow-right-icon class="mr-4"></arrow-right-icon>
{{$t('                  条件')}}{{ index + 1 }}
                </div>
                <close-icon
                  class="hover"
                  @click="state.conditions.splice(index, 1)"
                />
              </div>
              <div class="">
                <div class="form-item mt-4 px-16">
                  <label>{{$t('条件类型')}}</label>
                  <t-radio-group class="ml-8" v-model="c.type">
                    <t-radio value> {{$t('关系条件')}} </t-radio>
                    <t-radio value="fn"> {{$t('高级条件')}} </t-radio>
                  </t-radio-group>
                </div>
                <template v-if="!c.type">
                  <div class="form-item mt-8 px-16">
                    <label>{{$t( '比较条件' )}}</label>
                    <t-select-input
                      v-model:inputValue="c.key"
                      :value="c.keyLabel"
                      v-model:popupVisible="c.keyPopupVisible"
                      allow-input
                      clearable
                      @clear="c.keyLabel = undefined"
                      @focus="c.keyPopupVisible = true"
                      @blur="c.keyPopupVisible = false"
                      @input-change="onKeyInput(c)"
                      class="shrink-0"
                      style="width: 132px"
                    >
                      <template #panel>
                        <ul style="padding: 8px 12px">
                          <li
                            v-for="item in cprops"
                            :key="item.value"
                            @click="
                              c.key = item.value;
                              c.keyLabel = item.label;
                              c.keyPopupVisible = false;
                            "
                          >
                            {{ item.label }}
                          </li>
                        </ul>
                      </template>
                    </t-select-input>
                    <t-select
                      style="width: 132px"
                      v-model="c.operator"
                      :placeholder="$t('关系运算')"
                      :options="operatorOptions"
                      clearable
                      class="shrink-0"
                    />
                    <t-select
                      style="width: 132px"
                      v-model="c.valueType"
                      class="shrink-0"
                      :placeholder="$t('固定值')"
                    >
                      <t-option key="" value="" :label="$t('固定值')">
                        {{$t( '固定值' )}}
                      </t-option>
                      <t-option key="prop" value="prop" :label="$t('对象属性值')">
                        {{$t('对象属性')}}
                      </t-option>
                    </t-select>
                    <t-input
                      v-if="!c.valueType"
                      v-model="c.value"
                      @change="valueChange($event, c)"
                      class="shrink-0"
                    />
                    <template v-else>
                      <t-tree-select
                        style="width: 132px"
                        v-model="c.target"
                        :data="penTree"
                        filterable
                        :placeholder="$t('对象')"
                        class="shrink-0"
                        @change="onChangeTriggerTarget(c)"
                      />
                      <t-select-input
                        v-model:inputValue="c.value"
                        :value="c.label"
                        v-model:popupVisible="c.popupVisible"
                        allow-input
                        clearable
                        @clear="c.label = undefined"
                        @focus="c.popupVisible = true"
                        @blur="c.popupVisible = false"
                        @input-change="onInput(c)"
                        class="shrink-0"
                        :placeholder="$t('属性')"
                      >
                        <template #panel>
                          <ul style="padding: 8px 12px">
                            <li
                              v-for="item in cprops"
                              :key="item.value"
                              @click="
                                c.value = item.value;
                                c.label = item.label;
                                c.popupVisible = false;
                              "
                            >
                              {{ item.label }}
                            </li>
                          </ul>
                        </template>
                      </t-select-input>
                    </template>
                  </div>
                </template>
                <template v-else>
                  <div class="px-16">
                    <div>function condition(pen) {</div>
                    <CodeEditor
                      class="mt-4"
                      @change="codeChange($event, c)"
                      v-model="c.fnJs"
                    />
                    <div class="mt-4">}</div>
                  </div>
                </template>
              </div>
            </div>
            <div class="mt-8">
              <a @click="addTriggerCondition(state)"> + {{$t('添加触发条件')}} </a>
            </div>
          </div>
          <div class="form-item banner mt-16">
            <label>{{$t('执行动作')}}</label>
          </div>
          <Actions class="mt-8" :key="temAKey" :data="state" />
        </t-collapse-panel>
      </t-collapse>
      <div class="flex center mt-8">
        <t-button
          style="height: 30px; width: 100%; margin: 12px"
          @click="addTriggerStatus(trigger)"
          variant="outline"
        >
        <template #icon><add-icon /></template>
          {{$t( '添加状态' )}}
        </t-button>
      </div>
    </div>
  </t-drawer>
</template>

<script lang="ts" setup>
import { reactive, defineComponent, ref, getCurrentInstance } from 'vue';
import Actions from './Actions.vue';
// import Conditions from './Conditions.vue';
import { Edit2Icon, DeleteIcon, ArrowRightIcon, CloseIcon, AddIcon } from 'tdesign-icons-vue-next';
import { getPenTree, typeOptions, changeType } from '@/services/common';
import CodeEditor from '@/views/components/common/CodeEditor.vue';
const { proxy } = getCurrentInstance();
const $t = proxy.$t
const props = defineProps<{
  pen: any;
}>();

const trigger = ref();
const drawer = reactive({
  visible: false,
  header: $t('编辑状态'),
});

const openedCollapses = ref([0]);

const onAddTrigger = () => {
  if (!props.pen.triggers) {
    props.pen.triggers = [];
  }
  const i = props.pen.triggers.length;
  props.pen.triggers.push({
    name: $t('状态场景')+(i + 1),
    status: [
      {
        name: $t('状态1'),
        conditions: [],
        actions: [],
      },
    ],
    // key: '', //属性key
  });

  openedCollapses.value.push(i);
};

const delTrigger = (i: number) => {
  props.pen.triggers.splice(i, 1);
};

// const temCKey = ref(0);
const temAKey = ref(0);

const onEditTrigger = (data: any) => {
  // 辅助更新代码块数据
  // temCKey.value = Math.random();
  data.status?.forEach((item: any) => {
    item.conditions?.forEach((c: any) => {
      if (!c.keyLabel) {
        c.keyLabel = c.key;
      }
    });
  });
  temAKey.value = Math.random();
  trigger.value = data;
  drawer.header = data.name;
  drawer.visible = true;
  penTree.value = getPenTree();
};

const editLast = (index) => {
  if(index>-1){
    onEditTrigger(props.pen.triggers[index]);
  }
};

const addTriggerStatus = (triger: any) => {
  const i = props.pen.triggers.length;
  triger.status.push({
    name: $t('状态') + i,
    conditionType: 'and',
    conditions: [],
    actions: [],
  });
};

const panelInputClick = (e) => {
  e.e.stopPropagation();
};

const penTree: any = ref([]);

const onChangeTriggerTarget = (c: any) => {
  const target: any = meta2d.findOne(c.target);
  if (target && target.realTimes) {
    for (const item of target.realTimes) {
      const found = cprops.value.findIndex(
        (elem: any) => elem.value === item.key
      );
      if (found < 0) {
        cprops.value.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
};

const addTriggerCondition = (data: any) => {
  if (!data.conditionType) {
    data.conditionType = 'and';
  }
  data.conditions.push({
    type: '',
    operator: '=',
    valueType: '',
  });
};

const onKeyInput = (item: any) => {
  item.keyLabel = item.key;
};

const onInput = (item: any) => {
  item.label = item.value;
};

const cprops = ref<any>([
  {
    value: 'x',
    label: 'X',
  },
  {
    value: 'y',
    label: 'Y',
  },
  {
    value: 'width',
    label: $t('宽'),
  },
  {
    value: 'height',
    label: $t('高'),
  },
  {
    value: 'visible',
    label: $t('显示'),
  },
  {
    value: 'text',
    label: $t('文字'),
  },
  {
    value: 'color',
    label: $t('颜色'),
  },
  {
    value: 'background',
    label: $t('背景颜色'),
  },
  {
    value: 'progress',
    label: $t('进度'),
  },
  {
    value: 'progressColor',
    label: $t('进度颜色'),
  },
  {
    value: 'showChild',
    label: $t('状态'),
  },
  {
    value: 'rotate',
    label: $t('旋转'),
  },
  {
    value: 'disabled',
    label: $t('禁用'),
  },
  {
    value: 'selectedKey',
    label: $t('单选选中值'),
  }
]);

const operatorOptions = [
  { label: '=', value: '=' },
  { label: '!=', value: '!=' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: '>=', value: '>=' },
  { label: '<=', value: '<=' },
  { label: $t('包含'), value: '[)' },
  { label: $t('不包含'), value: '![)' },
];

const valueChange = (e, c: any) => {
  c.value = changeType(e);
};

const codeChange = (e: any, a: any) => {
  a.fn = null;
};

defineExpose({
  editLast,
});
</script>
<style lang="postcss" scoped>
.tigger-item {
  /* height: 50px; */
  /* line-height: 50px; */
  margin: 12px 8px;
  align-items: center;

  :deep(.t-input) {
    border-color: transparent;
    &:hover {
      border-color: var(--color-border-input);
    }
  }

  .operation {
    height: 40px;
    /* line-height: 40px; */
    align-items: center;

    .icon-box {
      width: 24px;
      height: 24px;
      margin: 4px;
      text-align: center;
      line-height: 24px;
      border-radius: 4px;

      &:hover {
        background: var(--td-brand-color-light);
      }

      .t-icon {
        width: 14px;
        height: 14px;
      }
    }
  }
  &:hover {
    background: var(--color-background-input);
    border-radius: 4px;
  }
}
:deep(.t-collapse) {
  .t-collapse-panel__header {
    .t-input {
      border-color: transparent;
      &:hover {
        border-color: var(--color-border-input);
      }
    }
  }

  .t-collapse-panel__icon:hover {
    background: none;
    svg {
      color: var(--color-primary);
    }
  }
  .banner {
    background-color: var(--color-background-input);
    padding: 0 12px;
  }
}

/* .props {
  :deep(.value-input) {
    max-width: 95px;
  }
} */

/* :deep(.value-label) {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */
</style>