ProDescriptions 高级描述列表 ​

<script setup lang="ts">
import { ProDescriptions } from 'uniboot-ui'

type Row = {
  name: string
  amount: number
  status: number
  remark: string
  description: string
}

const columns = [
  { dataIndex: 'name', title: '名称', tooltip: '展示名称' },
  {
    dataIndex: 'amount',
    title: '金额',
    valueType: 'money' as const,
    fieldProps: { precision: 2 },
  },
  {
    dataIndex: 'status',
    title: '状态',
    valueType: 'select' as const,
    options: [
      { label: '启用', value: 1 },
      { label: '停用', value: 0 },
    ],
  },
  { dataIndex: 'remark', title: '备注', copyable: true },
  {
    dataIndex: 'description',
    title: '描述',
    textEllipsis: true,
    textEllipsisWidth: '200px',
  },
]

async function request() {
  await new Promise((r) => setTimeout(r, 400))
  const data: Row = {
    name: '演示数据',
    amount: 1999.5,
    status: 1,
    remark: '来自文档示例的 ProDescriptions',
    description:
      '这是一段很长的描述文本内容，用于演示 textEllipsis 文本省略功能的效果，当文本超过设定宽度时会自动以省略号截断显示。',
  }
  return { data, success: true }
}
</script>

<template>
  <div class="pro-descriptions-doc-demo">
    <pro-descriptions
      title="详情示例"
      :column="2"
      :columns="columns"
      :request="request"
    />
  </div>
</template>

<style scoped>
.pro-descriptions-doc-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 0 16px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { ProDescriptions } from 'uniboot-ui'

const columns = [
  {
    dataIndex: 'companyName',
    title: '公司名称',
    span: 1,
    formItem: { required: true, placeholder: '请输入' },
    textEllipsis: true,
    textEllipsisWidth: '200px',
  },
  {
    dataIndex: 'country',
    title: '国家/地区',
    span: 1,
    formItem: { formType: 'select', required: true, placeholder: '请选择' },
    options: [
      { label: '中国-深圳', value: 'CN-SZ' },
      { label: '中国-北京', value: 'CN-BJ' },
      { label: '美国-纽约', value: 'US-NY' },
    ],
  },
  {
    dataIndex: 'timezone',
    title: '时区',
    span: 1,
    formItem: { formType: 'select', required: true, placeholder: '请选择' },
    options: [
      { label: '(UTC-05:00) Eastern Time (USA and Canada)', value: 'ET' },
      { label: '(UTC+08:00) China Standard Time', value: 'CST' },
      { label: '(UTC+09:00) Japan Standard Time', value: 'JST' },
    ],
  },
  {
    dataIndex: 'website',
    title: '公司官网',
    span: 1,
    formItem: { placeholder: '请输入' },
  },
  {
    dataIndex: 'contactName',
    title: '联系人姓名',
    span: 1,
    formItem: {
      required: true,
      placeholder: '请输入',
      rules: [
        { min: 2, message: '姓名至少2个字符', trigger: 'blur' },
        { max: 20, message: '姓名不能超过20个字符', trigger: 'blur' },
      ],
    },
  },
  {
    dataIndex: 'contactEmail',
    title: '联系人邮箱',
    span: 1,
    formItem: {
      required: true,
      placeholder: '请输入',
      rules: [
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
      ],
    },
  },
  {
    dataIndex: 'serviceTypes',
    title: '服务商类型',
    span: 1,
    slotName: 'cell-serviceTypes',
    formItem: { formType: 'select', placeholder: '请选择' },
    options: [
      { label: 'PSP', value: 'psp' },
      { label: 'ESP', value: 'esp' },
      { label: 'ISO', value: 'iso' },
    ],
  },
  {
    dataIndex: 'licenseImage',
    title: '营业执照',
    span: 1,
    slotName: 'cell-licenseImage',
    hideInEditForm: true,
  },
]

const dataSource = {
  companyName:
    'XXXXXXXX科技责任有限公司kdlkdldldldlldldldldldldldlddddddddddddddddd',
  country: 'CN-SZ',
  timezone: 'ET',
  website: 'www.baidu.com',
  contactName: '杜军',
  contactEmail: '905020481@qq.com',
  serviceTypes: ['psp', 'esp'],
}

/** inline 模式保存请求 */
async function saveRequest(values: Record<string, unknown>) {
  console.log('保存数据:', values)
  // 模拟 API 调用
  await new Promise((r) => setTimeout(r, 800))
  console.log('保存成功')
  return { success: true }
}
</script>

<template>
  <div class="pro-descriptions-doc-demo">
    <!-- ====== 只读态 + navigate 编辑模式 ====== -->
    <div class="demo-section">
      <h4 class="demo-section__title">navigate 模式（跳转新页面编辑）</h4>
      <ProDescriptions
        title="公司信息"
        :column="3"
        :columns="columns"
        :data-source="dataSource"
        :show-edit-icon="true"
        edit-mode="navigate"
        :border="false"
        direction="vertical"
      >
        <!-- 服务商类型 -->
        <template #cell-serviceTypes="{ value }">
          <span v-for="v in value as string[]" :key="v" class="tag-item">
            {{ v.toUpperCase() }}
          </span>
        </template>
        <!-- 营业执照 -->
        <template #cell-licenseImage>
          <div class="license-image">
            <img src="https://picsum.photos/200/260?random=2" alt="营业执照" />
          </div>
        </template>
      </ProDescriptions>
    </div>

    <u-divider />

    <!-- ====== inline 编辑模式：只读态 ====== -->
    <div class="demo-section">
      <h4 class="demo-section__title">
        inline 模式（当前页面内编辑）— 只读状态
      </h4>
      <ProDescriptions
        v-if="!showInlineEdit"
        title="公司信息"
        :column="3"
        :columns="columns"
        :data-source="dataSource"
        :show-edit-icon="true"
        edit-mode="inline"
        :border="false"
        direction="vertical"
        @edit="showInlineEdit = true"
      >
        <!-- 服务商类型 -->
        <template #cell-serviceTypes="{ value }">
          <span v-for="v in value as string[]" :key="v" class="tag-item">
            {{ v.toUpperCase() }}
          </span>
        </template>
        <!-- 营业执照图片 -->
        <template #cell-licenseImage>
          <div class="license-image">
            <img src="https://picsum.photos/200/260?random=2" alt="营业执照" />
          </div>
        </template>
      </ProDescriptions>

      <!-- ====== inline 编辑模式：编辑态 ====== -->
      <ProDescriptions
        v-else
        title="公司信息"
        :column="3"
        :columns="columns"
        :data-source="dataSource"
        edit-mode="inline"
        :save-request="saveRequest"
        direction="vertical"
        @cancel="showInlineEdit = false"
        @save-success="(ok) => ok && (showInlineEdit = false)"
      >
        <!-- 服务商类型：只读态插槽 -->
        <template #cell-serviceTypes="{ value }">
          <span v-for="v in value as string[]" :key="v" class="tag-item">
            {{ v.toUpperCase() }}
          </span>
        </template>
        <!-- 服务商类型：编辑态插槽 -->
        <template #edit-serviceTypes="{ modelValue }">
          <div class="service-tags">
            <u-tag
              v-for="tag in modelValue as string[]"
              :key="tag"
              closable
              size="default"
              @close="
                const arr = [...(dataSource.serviceTypes as string[])].filter(
                  (t) => t !== tag
                )
                dataSource.serviceTypes = arr
                ;($event: any) => {}
              "
            >
              {{ tag.toUpperCase() }}
            </u-tag>
            <u-select
              :model-value="''"
              placeholder=""
              style="width: 80px"
              size="small"
              @change="
                (val: any) => {
                  dataSource.serviceTypes = [
                    ...(dataSource.serviceTypes as string[]),
                    val,
                  ]
                }
              "
            >
              <u-option
                v-for="opt in columns[6].options"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
                :disabled="
                  (dataSource.serviceTypes as string[]).includes(
                    opt.value as string
                  )
                "
              />
            </u-select>
          </div>
        </template>

        <!-- 营业执照图片 -->
        <template #cell-licenseImage>
          <div class="license-image">
            <img src="https://picsum.photos/200/260?random=2" alt="营业执照" />
          </div>
        </template>

        <!-- 编辑态上传图片 -->
        <template #edit-licenseImage>
          <div class="upload-area">
            <u-icon :size="24"
              ><svg
                viewBox="0 0 1024 1024"
                width="1em"
                height="1em"
                fill="currentColor"
              >
                <path
                  d="M480 480V128a32 32 0 0164 0v352h352a32 32 0 010 64H544v352a32 32 0 01-64 0V544H128a32 32 0 010-64h352z"
                /></svg
            ></u-icon>
            <span>上传图片</span>
          </div>
        </template>
      </ProDescriptions>
    </div>
  </div>
</template>

<style scoped>
.pro-descriptions-doc-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 0 16px;
}
.demo-section {
  margin-bottom: 24px;
}
.demo-section__title {
  margin: 0 0 12px;
  font-size: 14px;
  color: #909399;
  font-weight: 400;
}
.tag-item {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 13px;
  color: #1677ff;
}
.license-image {
  width: 160px;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
}
.license-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-area {
  width: 120px;
  height: 120px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: #909399;
  transition: border-color 0.2s;
}
.upload-area:hover {
  border-color: #4096ff;
  color: #4096ff;
}
.service-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>