sl-sfy-safety/src/views/system-config/template/TitleCommon.vue

<template>
  <div>
    <div class="form-tip">{{ '提示：' + getTipByTab(props.tab) }}</div>
    <el-form inline ref="ruleFormRef" :model="form">
      <el-form-item style="margin-top: 0px">
        <el-input
          v-model="form.name"
          :placeholder="`请输入` + props.type + `名称`"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="findDataByName(ruleFormRef)" />
          </template>
        </el-input>

        <!-- <el-input style="width: 200px" :placeholder="`请输入` + props.type + `名称`" v-model="form.name" clearable
                    @clear="clearData" /> -->
      </el-form-item>
      <!-- <el-button type="primary" :icon="Search" @click="findDataByName(ruleFormRef)">查询</el-button> -->
      <el-button
        type="primary"
        :icon="Plus"
        @click="addForm"
        style="position: absolute; right: 0; width: 100px"
      >
        {{ props.type }}</el-button
      >
    </el-form>
  </div>

  <el-drawer
    v-model="titleDrawer"
    direction="rtl"
    :title="props.type === '模板' ? '添加模板' : '添加标签'"
    :before-close="handleClose"
  >
    <DrawerCommonVue :detail="drawerFormData" :type="props.type" @submit-drawer="submitDrawer" />
  </el-drawer>
</template>

<script setup lang="ts">
  import { Search, Plus } from '@element-plus/icons-vue';
  import { onMounted, ref, watch } from 'vue';
  import { ElMessageBox, FormInstance } from 'element-plus';
  import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
  import { useKeyPress } from 'vue-hooks-plus';
  import { LabelType, getTipByTab } from './constant';

  export type CreateType = '添加模板' | '修改模板';
  const props = defineProps<{
    type: string;
    pagesize: number;
    pagenumber: number;
    drawer: boolean;
    tab: LabelType;
  }>();
  const emit = defineEmits([
    'findDataByName',
    'submitDrawer',
    'handleClose',
    'addForm',
    'clearData',
  ]);
  const form = ref({
    name: '',
  });
  const ruleFormRef = ref<FormInstance>();
  const currentType = ref<CreateType>('添加模板');
  const defaultFormValue = { id: 0, code: '', name: '', remark: '', status: 0 };
  const drawerFormData = ref<FormModelCommon>({ ...defaultFormValue } as FormModelCommon);

  export interface DataCommon {
    name: string;
    size: number;
    page: number;
  }
  useKeyPress('enter', () => {
    findDataByName(ruleFormRef.value);
  });
  const titleDrawer = ref(false);
  watch(
    () => props.drawer,
    (newdrawer) => {
      titleDrawer.value = newdrawer;
    },
    { immediate: true },
  );

  // 根据名称找到数据-finish
  function findDataByName(formEl: FormInstance | undefined) {
    console.log('findDataByName');
    if (!formEl) return;
    formEl.validate((valid, fields) => {
      if (valid) {
        const data = ref<DataCommon>({
          name: form.value.name,
          size: props.pagesize,
          page: props.pagenumber,
        });
        emit('findDataByName', data.value);
      } else {
        console.log('error submit!', fields);
      }
    });
  }

  function addForm() {
    currentType.value = '添加模板';
    emit('addForm');
  }

  // 添加
  function submitDrawer(data) {
    emit('submitDrawer', data);
    setTimeout(() => {
      drawerFormData.value = { ...defaultFormValue };
    }, 500);
  }

  const handleClose = (done: () => void) => {
    done();
    emit('handleClose');
  };

  // function clearData() {
  //     emit('clearData');
  // }

  onMounted(() => {});
</script>

<style scoped>
  .form-tip {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #909399;
    line-height: 38px;
    text-align: left;
    font-style: normal;
  }
</style>