一.弹框组件

前言

• 1.添加类型size
• 2.头部改造
• 3.弹框组件+表单组件

默认

<template>
    <web-button @click="handleShow1">显示1</web-button>
    <web-dialog title="1111" mold="create" size="big" v-model="show1" @handleCancel="handleCancel1"
        @handleConfirm="handleConfirm1">
        xxxxx
    </web-dialog>
    <web-button @click="handleShow1">显示2</web-button>
    <web-dialog title="1111" mold="view" size="big" v-model="show2" @handleCancel="handleCancel2"
        @handleConfirm="handleConfirm2">
        xxxxx
    </web-dialog>
    <web-button @click="handleShow2">显示3</web-button>
    <web-dialog title="1111" mold="message" v-model="show3" @handleCancel="handleCancel3"
        @handleConfirm="handleConfirm3">
        xxxxx
    </web-dialog>
    <web-button @click="handleShow3">显示4</web-button>
    <web-dialog title="1111" mold="edit" size="middle" v-model="show4" @handleCancel="handleCancel4"
        @handleConfirm="handleConfirm4">
        xxxxx
    </web-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show1 = ref(false)
const handleShow1 = () => {
    show1.value = true
}
const handleCancel1 = () => {
    show1.value = false
}
const handleConfirm1 = () => {
    show1.value = false
}

const show2 = ref(false)
const handleShow2 = () => {
    show2.value = true
}
const handleCancel2 = () => {
    show2.value = false
}
const handleConfirm2 = () => {
    show2.value = false
}

const show3 = ref(false)
const handleShow3 = () => {
    show3.value = true
}
const handleCancel3 = () => {
    show3.value = false
}
const handleConfirm3 = () => {
    show3.value = false
}

const show4 = ref(false)
const handleShow4 = () => {
    show4.value = true
}
const handleCancel4 = () => {
    show4.value = false
}
const handleConfirm4 = () => {
    show4.value = false
}
</script>

<style lang="scss">
.web-button {
   margin-right: 20px;
}
</style>

创建

• 通过type字段选择不同的组件，内部使用异步组件动态加载

<template>
  <web-dialog-create :rules="rules" size="big" title="创建xx" v-model="show" :close="handleClose" @reloadList="reloadData"
    :creteForm="formData" :request="handleRequest"/>
  <web-button @click="handleCreate">创建</web-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
const create = ref(false)
const handleCreate = () => {
  show.value = true
  create.value = true
}
const handleClose = () => {
  show.value = false
  create.value = false
}
const handleRequest = (val) => {
  debugger
}
const typeChange = (val: any) => {
  if (val === 1) {
    formData.value = baseFormData
  } else {
    formData.value = baseFormData2
  }
}
const rules = {
  relatedId: [
    { required: true, message: '请输入sssdds/rtyrtyrt', trigger: 'blur' }
    // { type: 'number', max: 1000, message: "sssdds/rtyrtyrt为数字" }
  ],
  type: [{ required: true, message: '请选择asdfasdf', trigger: 'blur' }],
  image: [{ required: true, message: '请选择展示图', trigger: 'blur' }],
  count: [
    { required: true, message: '请输入数量', trigger: 'blur' }
    // { type: 'number', max: 1000, message: "数量为数字" }
  ],
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入说明', trigger: 'blur' }]
}
const baseFormData = [
  [
    {
      prop: 'type',
      label: '类型',
      type: 'select',
      component: {
        placeholder: '请选择类型',
        onChange: typeChange,
        request: () => [{ value: 1, label: '1asdfaqwfsafa' }, { value: 2, label: 'asdf23asdfa2' }]
      }
    },
    {}
  ],
  [
    {
      prop: 'relatedId',
      label: 'xxx',
      type: 'input',
      component: {
        placeholder: '请输入sssddsid'
      }
    },
    {}
  ],
  [
    {
      prop: 'name',
      label: '名称',
      type: 'input',
      component: {
        placeholder: '请输入名称'
      }
    },
    {
      prop: 'count',
      label: 'saddd',
      type: 'input',
      component: {
        placeholder: '请输入ss'
      }
    }
  ],
  [
    {
      prop: 'remark',
      label: '说明',
      type: 'rich',
      component: {
        menus: [
          'head',
          'bold',
          'fontSize',
          // 'fontName',
          // 'italic',
          // 'underline',
          // 'strikeThrough',
          // 'indent',
          // 'lineHeight',
          // 'foreColor',
          // 'backColor',
          // 'link',
          'list',
          // 'todo',
          // 'justify',
          // 'quote',
          // 'emoticon',
          'image'
          // 'video',
          // 'table',
          // 'code',
          // 'splitLine',
          // 'undo',
          // 'redo',
        ],
        style: 'width: 100%'
      }
    }
  ]
]
const formData = ref(baseFormData)
</script>
<style lang="scss" scoped></style>

编辑

• 通过init字段赋给默认值

<template>
  <web-dialog-create :rules="rules" size="big" title="编辑xx" v-model="show" :close="handleClose" @reloadList="reloadData"
    :creteForm="formData" :request="handleRequest" />
  <web-button @click="handleCreate">编辑</web-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
const create = ref(false)
const handleCreate = () => {
  show.value = true
  create.value = true
}
const handleClose = () => {
  show.value = false
  create.value = false
}
const handleRequest = (val) => {
}
const typeChange = (val: any) => {
  if (val === 1) {
    formData.value = baseFormData
  } else {
    formData.value = baseFormData2
  }
}
const rules = {
  relatedId: [
    { required: true, message: '请输入sssdds/rtyrtyrt', trigger: 'blur' }
    // { type: 'number', max: 1000, message: "sssdds/rtyrtyrt为数字" }
  ],
  type: [{ required: true, message: '请选择asdfasdf', trigger: 'blur' }],
  image: [{ required: true, message: '请选择展示图', trigger: 'blur' }],
  count: [
    { required: true, message: '请输入数量', trigger: 'blur' }
    // { type: 'number', max: 1000, message: "数量为数字" }
  ],
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入说明', trigger: 'blur' }]
}
const baseFormData = [
  [
    {
      prop: 'type',
      label: '类型',
      type: 'select',
      init: 1,
      component: {
        placeholder: '请选择类型',
        onChange: typeChange,
        request: () => [{ value: 1, label: '1asdfaqwfsafa' }, { value: 2, label: 'asdf23asdfa2' }]
      }
    },
    {}
  ],
  [
    {
      prop: 'relatedId',
      label: 'xxx',
      type: 'input',
      init:55,
      component: {
        placeholder: '请输入sssddsid'
      }
    },
    {}
  ],
  [
    {
      prop: 'name',
      label: '名称',
      type: 'input',
      init:'李白',
      component: {
        placeholder: '请输入名称'
      }
    },
    {
      prop: 'count',
      label: 'saddd',
      type: 'input',
      init:'1111',
      component: {
        placeholder: '请输入ss'
      }
    }
  ],
  [
    {
      prop: 'remark',
      label: '说明',
      type: 'rich',
      init:`什么是纯文本 什么是富文本 – PingCode



相对于纯文本,富文本是指那些包含了格式信息的文本,比如字体样式(粗体、斜体等)、颜色、超链接、图像、表格等多媒体元素。富文本编辑器如Microsoft Word或网页上的HTML编辑器能支持这些格式。富文...

PingCode`,
      component: {
        menus: [
          'head',
          'bold',
          'fontSize',
          // 'fontName',
          // 'italic',
          // 'underline',
          // 'strikeThrough',
          // 'indent',
          // 'lineHeight',
          // 'foreColor',
          // 'backColor',
          // 'link',
          'list',
          // 'todo',
          // 'justify',
          // 'quote',
          // 'emoticon',
          'image'
          // 'video',
          // 'table',
          // 'code',
          // 'splitLine',
          // 'undo',
          // 'redo',
        ],
        style: 'width: 100%'
      }
    }
  ]
]

const formData = ref(baseFormData)
</script>
<style lang="scss" scoped></style>

查看

• 去掉取消、确认按钮

<template>
  <web-dialog-view size="big"  title="查看xxx" :creteForm="data" v-model="show" :close="handleClose" />
  <web-button @click="handleView">查看</web-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const initFormData: any = {
  relatedId: 'sssss',
  type: '1',
  count: '中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国',
  name: '小明',
  remark: '中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国',
}
const formData = ref<any>(initFormData)
const modelTypes = ref<Array<any>>([
  {
    value: '1',
    desc: 'adfasdfad',
  },
  {
    value: '2',
    desc: 'asdfqweqsdfasd',
  },
])
const data = ref(
  [
    [
      {
        prop: 'type',
        label: "xx项目",
        type: 'div',
        init: modelTypes.value.find(i => i.value == formData.value.type)?.desc,
      },
    ],
    [
      {
        prop: 'name',
        label: "名称",
        type: 'div',
        init: formData.value.name
      },
      {
        prop: 'count',
        label: "xx数量",
        type: 'div',
        init: formData.value.count
      }
    ],
    [
      {
        prop: 'relatedId',
        label: "asdfid",
        type: 'div',
        init: formData.value.relatedId
      }
    ],
    [
      {
        prop: 'remark',
        label: "dddd",
        type: 'div',
        init: formData.value.remark
      }
    ],
  ]
)
const handleView = () => {
  show.value = true
}
const handleClose = () => {
  show.value = false
}
//查看状态
const show = ref(false)

</script>
<style lang="scss" scoped></style>