hxgksystemapp/src/views/sysworkflow/codepage/cardadd.vue

<!-- 添加卡片 -->
<script setup>
import { ref,computed,reactive,watch,defineProps,toRef} from 'vue';
import { ElDrawer, ElMessageBox } from 'element-plus'
const props = defineProps({
  visible:Boolean
});
const emits = defineEmits(["update:visible", "data"]);

const formLabelWidth = '80px'
let timer
const dialog = ref(false)
const loading = ref(false)

const form = reactive({
  data:{
    name: '',
    details:'',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: ''
  },
  visible: computed({
    get(){
      return props.visible
    },
    set(val) {
      emits('update:visible', val)
    }
  })
})
const drawerRefadd = ref();

// 原element表单提交
const onClick = () => {
  if (drawerRefadd.value && typeof drawerRefadd.value.close === 'function') {
    drawerRefadd.value.close();
  } else {
    console.error('drawerRef.value值为空、未定义或没有close方法');
  }
}
// 修改表单提交
// const onSubmit = () => {
//   // 验证表单数据...
//   if (!form.data.name) {
//     ElMessage.error("标题不能为空");
//     return;
//   }
//   // 模拟向本地数据添加新的卡片数据
//   const newCard = { ...form.data };
//   // 关闭添加卡片的抽屉
//   drawerRefadd.value.close();
//   // 将新卡片数据发送回父组件
//   emits('data', newCard);
//   // 清空表单以便下次使用
//   form.data.name = '';
//   // 提交成功后，关闭loading状态
//   loading.value = false;
// };
  
// };
// 关闭
const handleClose = () => {
  if (loading.value) {
    return
  }
  ElMessageBox.confirm(
    '你是否要提交数据?',
    "温馨提示",
     {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      loading.value = true
      timer = setTimeout(() => {
        // done() 不能用done
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false
          emits('update:visible', false)
        }, 400)
      }, 2000)
    })
    .catch(() => {
      // catch error
      cancelForm();
    })
}
// 取消
const cancelForm = () => {
  loading.value = false
  dialog.value = false
  emits('update:visible', false)
  clearTimeout(timer)

}

</script>

<template>
    <el-drawer
    ref="drawerRefadd"
    :modelValue="visible"
    title="添加"
    :before-close="handleClose"
    direction="ltr"
    class="demo-drawer"
    size="400px"
    >
    <div class="demo-drawer__content">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <div class="picture">
            <el-image :src></el-image>
            <div>
              <input
              type="file"
              class="upinput"
              ref="file"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">
        {{loading ? '正在提交 ...' : '提交'}}
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<style scoped>
.el-form {
  margin: 30px 15px 10px 0;
  .el-image {
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
    margin-right: 10px;
  }
}
.picture {
  display: flex;
  justify-content: space-around;
  .uppicture {
    flex: 1;
    position: relative;
    border: 1px solid #ccc;
    input {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      opacity: 0;
    }
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
    }
  }
}
</style>