and design vue 高级查询

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="props.title"
    :useWrapper="true"
    width="1200px"
    okText="查询"
  >
    <BasicForm @register="registerForm">
      <!--   <template #add="{ field }">
        <Button v-if="Number(field) === 0" @click="add">+</Button>
        <Button v-if="field > 0" @click="del(field)">-</Button>
      </template> -->
      <template #add>
        <div style="width: 70%; float: left">
          <a-select
            :value="pipei"
            style="width: 92%; margin-bottom: 11px"
            @change="changeItempin($event)"
          >
            <a-select-option value="所有条件都要求匹配">所有条件都要求匹配</a-select-option>
            <a-select-option value="只匹配等于的条件">只匹配等于的条件</a-select-option>
            <a-select-option value="只匹配包含的条件">只匹配包含的条件</a-select-option>
          </a-select>

          <div class="c-o-d" v-for="(item, index) in connectArr" :key="index">
            <div class="c-o-d-i">
              <div class="c-o-d-i-1">
                <a-select
                  :value="item.linkPerson"
                  style="width: 160px"
                  placeholder="请选择查询条件"
                  @change="changeItem($event, item, 'linkPerson')"
                >
                  <a-select-option value="货号">货号</a-select-option>
                  <a-select-option value="产品类别">产品类别</a-select-option>
                  <a-select-option value="产品子类别">产品子类别</a-select-option>
                  <a-select-option value="产品名称">产品名称</a-select-option>
                  <a-select-option value="panel编号">panel编号</a-select-option>
                  <a-select-option value="panel简称">panel简称</a-select-option>
                  <a-select-option value="规格">规格</a-select-option>
                </a-select>
              </div>
              <div class="c-o-d-i-1">
                <a-select
                  class="inner-input"
                  :value="item.linkPersonPost"
                  style="width: 160px"
                  placeholder="请选择查询条件"
                  @change="changeItem($event, item, 'linkPersonPost')"
                >
                  <a-select-option value="等于">等于</a-select-option>
                  <a-select-option value="不等于">不等于</a-select-option>
                  <a-select-option value="小于">小于</a-select-option>
                  <a-select-option value="大于">大于</a-select-option>
                  <a-select-option value="包含">包含</a-select-option>
                  <a-select-option value="开头以">开头以</a-select-option>
                  <a-select-option value="结束以">结束以</a-select-option>
                  <a-select-option value="是空的">是空的</a-select-option>
                  <a-select-option value="小于或等于">小于或等于</a-select-option>
                </a-select>
              </div>
              <div class="c-o-d-i-1">
                <a-input
                  class="inner-input"
                  style="width: 160px"
                  :value="item.phoneNumbers"
                  @change="changeItem($event, item, 'phoneNumbers')"
                  placeholder="请填值"
                />
              </div>
            </div>
            <div class="c-o-d-o">
              <plus-circle-outlined
                @click="addCur(index)"
                class="addBtn"
                :style="{ color: '#08c', marginRight: '10px' }"
              />
              <delete-outlined
                @click="deleteCur(index)"
                v-if="index !== 0"
                :style="{ color: 'red' }"
              />
            </div>
          </div>
        </div>
        <div style="background: rgb(236, 236, 236); padding: 30px; width: 30%; float: right">
          <Card title="保存的查询">
            <div v-if="QUeryList.length > 0" v-for="(item, index) in QUeryList" :key="index">
              <CardGrid style="width: 100%; text-align: center" @click="CardClick(item)">{{
                item
              }}</CardGrid>
            </div>
            <div v-else>
              <Empty />
            </div>
          </Card>
        </div>
      </template>
    </BasicForm>

    <template #footer>
      <div>
        <!--       <a-button type="primary" style="float: left">重置</a-button> -->
        <a-button type="primary" style="float: left" @click="SaveQuery">保存</a-button>
      </div>
      <div style="height: 30px">
        <a-button type="primary" style="float: right; margin-right: 8px">查询</a-button>
        <a-button type="primary" style="float: right; margin-right: 8px">关闭</a-button>
      </div>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, defineProps } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { updateInvoiceStateFormSchema } from './data';
  /*   import { updateInvoiceStateCommit } from './table'; */
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';
  import { useTableContext } from '/@/components/Table/src/hooks/useTableContext';
  import { Button } from '/@/components/Button';
  import { PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { Card, CardGrid, Empty } from 'ant-design-vue';
  import { map } from 'lodash-es';
  const { createMessage } = useMessage();
  const table = useTableContext();
  const [
    registerForm,
    { appendSchemaByField, removeSchemaByField, resetFields, validate, setFieldsValue },
  ] = useForm({
    labelWidth: 100,
    baseColProps: { span: 24 },
    schemas: updateInvoiceStateFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 23,
    },
  });
  let connectArr = ref<Array<T>>([
    {
      linkPerson: '',
      linkPersonPost: '',
      phoneNumbers: '',
    },
  ]);

  const userStore = useUserStore();
  const usernames = userStore.getUserInfo.realName;

  const pipei = ref('所有条件都要求匹配');
  const props = defineProps({
    title: { type: String, default: '高级查询构造器' },
  });
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    debugger;
    resetFields();
    setModalProps({ confirmLoading: false });
    console.log(data);

    connectArr.value = [
      {
        linkPerson: '',
        linkPersonPost: '等于',
        phoneNumbers: '',
      },
    ];
  });

  const addCur = (index: number) => {
    console.log('ApiContact >>> 添加联系人', connectArr);
    let obj = {
      linkPerson: '',
      linkPersonPost: '',
      phoneNumbers: '',
    };
    connectArr.value.splice(index + 1, 0, obj);
  };

  const deleteCur = (index: number) => {
    connectArr.value.splice(index, 1);
    console.log('ApiContact >>> 删除某个联系人', connectArr);
    /*    state.value = unref(connectArr); */
  };

  const changeItempin = (e: any) => {
    pipei.value = e;
  };
  const changeItem = (e: any, item: any, type: string) => {
    console.log('connectArr', e, item);
    if (type === 'linkPerson') {
      item.linkPerson = e;
    }
    if (type === 'linkPersonPost') {
      item.linkPersonPost = e;
    }
    if (type === 'phoneNumbers') {
      item.phoneNumbers = e.target.value;
    }
    console.log('ApiContact >>> 编辑联系人列表', connectArr);
  };
  const QUeryList = ref([]);
  let maps = new Map();
  async function SaveQuery() {
    maps.set(pipei.value, connectArr.value);
    QUeryList.value.push(pipei.value);
    debugger;
  }

  function CardClick(val) {
    var list = maps.get(val);
    connectArr.value = [];
    for (let index = 0; index < list.length; index++) {
      const element = list[index];

      let obj = {
        linkPerson: element.linkPerson,
        linkPersonPost: element.linkPersonPost,
        phoneNumbers: element.phoneNumbers,
      };
      connectArr.value.splice(index + 1, 0, obj);
    }
  }
</script>
<style lang="less" scoped>
  .c-o-d {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    margin-bottom: 10px;
    margin-left: -23px;

    .c-o-d-i {
      flex: 9.5;

      display: flex;
      justify-content: space-between;
      padding-left: 22px;

      .c-o-d-i-1 {
        display: flex;
        align-items: center;
        // margin-right: 5px;
        height: 100%;

        .title {
          width: auto;
          text-align: right;
          display: block;
        }

        .inner-input {
          flex: 1;
        }
      }
    }

    .c-o-d-o {
      width: 38px;
      text-align: left;
      // border: 1px solid black;
      margin-left: 10px;
      // margin-bottom: 10px;
    }
  }
</style>