iov-pro-components 0.0.3

package/src/views/search-table.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="search-table-bg">
+    <h1>普通</h1>
+    <iov-pro-search-table
+      :form-items="FORM_ITEMS"
+      :table-columns="COLUMNS"
+      :request="{ api: demoRequest }"
+    >
+      <template #action-bar>
+        <el-button
+          size="small"
+          round
+          type="primary"
+        >新增</el-button>
+      </template>
+      <template #expand>12121</template>
+      <template #desc>33333</template>
+    </iov-pro-search-table>
+
+    <h1>单搜索多表格</h1>
+    <iov-pro-search-table-inner-tabs
+      :form-items="FORM_ITEMS"
+      :config="{ table: { border: true } }"
+    >
+      <iov-pro-search-table
+        title="标题1"
+        :table-columns="COLUMNS"
+        :request="{ api: demoRequest }"
+      >
+        <template #action-bar>
+          <el-button
+            size="small"
+            round
+            type="primary"
+          >新增</el-button>
+        </template>
+        <template #expand>12121</template>
+        <template #desc>33333</template>
+      </iov-pro-search-table>
+      <iov-pro-search-table
+        title="标题1"
+        :table-columns="COLUMNS"
+        :request="{ api: demoRequest }"
+      >
+        <template #action-bar>
+          <el-button
+            size="small"
+            round
+            type="primary"
+          >新增</el-button>
+        </template>
+        <template #expand>12121</template>
+        <template #desc>33333</template>
+      </iov-pro-search-table>
+    </iov-pro-search-table-inner-tabs>
+
+    <h1>多搜索表格</h1>
+    <iov-pro-search-table-outer-tabs>
+      <iov-pro-search-table
+        title="标题1"
+        :form-items="FORM_ITEMS"
+        :table-columns="COLUMNS"
+        :request="{ api: demoRequest }"
+      >
+        <template #action-bar>
+          <el-button
+            size="small"
+            round
+            type="primary"
+          >新增</el-button>
+        </template>
+        <template #expand>12121</template>
+        <template #desc>33333</template>
+      </iov-pro-search-table>
+      <iov-pro-search-table
+        title="标题2"
+        :form-items="FORM_ITEMS"
+        :table-columns="COLUMNS"
+        :request="{ api: demoRequest }"
+      >
+        <template #action-bar>
+          <el-button
+            size="small"
+            round
+            type="primary"
+          >新增</el-button>
+        </template>
+        <template #expand>12121</template>
+        <template #desc>33333</template>
+      </iov-pro-search-table>
+    </iov-pro-search-table-outer-tabs>
+  </div>
+</template>
+
+<script>
+const SEX = [
+  { label: '男', value: 1 },
+  { label: '女', value: 2 }
+]
+
+const TAGS = [
+  { label: '性格好', value: 1 },
+  { label: '是个好人', value: 2 },
+  { label: '渣男', value: 3 }
+]
+
+const FORM_ITEMS = [
+  {
+    type: 'input',
+    label: '姓名',
+    name: 'name',
+    rules: {
+      required: true,
+      message: '请输入姓名',
+      trigger: 'blur'
+    }
+  },
+  {
+    type: 'input',
+    label: '年龄',
+    name: 'age',
+    value: 18,
+    props: {
+      placeholder: '请输入年龄'
+    },
+    rules: {
+      required: true,
+      message: '请输入姓名',
+      trigger: 'blur'
+    }
+  },
+  {
+    type: 'select',
+    label: '性别',
+    name: 'sex',
+    value: options => options[0]?.value,
+    options: [
+      { label: '男', value: 1 },
+      { label: '女', value: 2 }
+    ]
+  },
+  {
+    type: 'radio-button',
+    label: '是否抽烟',
+    name: 'smoke',
+    value: 1,
+    reloadRequest: true,
+    options: [
+      { label: '是', value: 1 },
+      { label: '否', value: 2 }
+    ]
+  },
+  {
+    type: 'select',
+    label: ({ sex }) => `最喜欢的${sex === 1 ? '男性' : '女性'}运动`,
+    name: 'sport',
+    watch: ['sex'],
+    labelWidth: '140px',
+    value: options => options[0]?.value,
+    rules: ({ sex }) => {
+      return sex === 1 ? { required: true, message: '请选择' } : null
+    },
+    props: {
+      handler({ sex }) {
+        return sex === 2 ? { clearable: false } : {}
+      }
+    },
+    options({ sex }) {
+      if (!sex) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([])
+          }, 100)
+        })
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          if (sex === 1) {
+            resolve([
+              { label: '足球', value: 1 },
+              { label: '篮球', value: 2 }
+            ])
+          } else {
+            resolve([
+              { label: '乒乓球', value: 3 },
+              { label: '羽毛球', value: 4 }
+            ])
+          }
+        }, 300)
+      })
+    }
+  },
+  {
+    type: 'checkbox',
+    name: 'location',
+    label: '喜欢去的场所',
+    labelWidth: '110px',
+    span: 12,
+    watch: ['sex'],
+    options: ({ sex }) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const options = [
+            { label: '足球', value: 1 },
+            { label: '篮球', value: 2 }
+          ]
+          if (sex === 1) {
+            options.push({ label: '翠林', value: 3 })
+          }
+          if (sex === 2) {
+            options.push({ label: '美容院', value: 4 })
+          }
+          resolve(options)
+        }, 300)
+      })
+    }
+  },
+  {
+    type: 'select',
+    name: 'tags',
+    label: '标签',
+    labelWidth: '110px',
+    options: TAGS
+  },
+  {
+    type: 'date-picker',
+    label: '毕业时间',
+    span: 12,
+    name: ['startTime', 'endTime'],
+    props: {
+      type: 'daterange'
+    },
+    value: ['2024-10-01 00:00:00', '2024-11-01 00:00:00']
+  }
+]
+
+const COLUMNS = [
+  { type: 'expand', slotName: 'expand', width: '80px' },
+  { label: '姓名', prop: 'name', width: '120px' },
+  { type: 'img', label: '头像', prop: 'avator', config: { width: '42px', height: '42px' }},
+  { label: '英文名', prop: 'englishName', width: '120px', showOverflowTooltip: true },
+  { type: 'enum', label: '性别', prop: 'sex', enums: SEX },
+  { type: 'tag', label: '人物标签', prop: 'tag', enums: TAGS },
+  { type: 'link', label: '人物简介', prop: 'link', minWidth: '120px' },
+  { type: 'slot', label: '备注信息', prop: 'desc', minWidth: '140px' },
+  { type: 'slot', label: '操作', prop: 'operation', fixed: 'right', width: '160px' }
+]
+
+const demoRequest = (params) => {
+  console.log('11111 params: ', params)
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        list: [
+          {
+            name: '小明',
+            englishName: 'John',
+            sex: 1,
+            tag: 3,
+            link: '去跳转',
+            avator: 'https://img.yzcdn.cn/vant/cat.jpeg',
+            desc: '<div style="color: red;">唱跳rap</div>'
+          },
+          {
+            name: '小红',
+            englishName: 'John',
+            sex: 2,
+            tag: [1, 2, 3],
+            link: '去跳转',
+            avator: 'https://img.yzcdn.cn/vant/cat.jpeg',
+            desc: '<div style="color: green;">砍人手</div>'
+          }
+        ],
+        totalCount: 21
+      })
+    }, 300)
+  })
+}
+
+export default {
+  name: 'SearchTableDemo',
+  data() {
+    return {
+      FORM_ITEMS,
+      COLUMNS,
+      demoRequest
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.search-table-bg {
+  background-color: lightgrey;
+  padding: 12px;
+}
+</style>

package/src/views/table.vue

@@ -0,0 +1,145 @@
+<template>
+  <iov-pro-table
+    :columns="COLUMNS"
+    :request="{ api: request }"
+  >
+    <template #desc="{ row }">
+      <div v-html="row.desc" />
+    </template>
+    <template #operation>
+      <iov-pro-link-group max="3">
+        <el-link type="primary">详情</el-link>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary">复制</el-link>
+        <el-link type="primary">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+const SEX = [
+  { label: '男', value: 1 },
+  { label: '女', value: 2 }
+]
+
+const TAGS = [
+  { label: '性格好', value: 1 },
+  { label: '是个好人', value: 2 },
+  { label: '渣男', value: 3 }
+]
+
+const COLUMNS = [
+  { type: 'index', label: '序号', width: '80px' },
+  { label: '姓名', prop: 'name', width: '120px', searchable: true },
+  { type: 'img', label: '头像', prop: 'avator', config: { width: '42px', height: '42px', style: 'border-radius: 4px' }},
+  { label: '英文名', prop: 'englishName', width: '120px', showOverflowTooltip: true, searchable: true },
+  { type: 'enum', label: '性别', prop: 'sex', enums: SEX, sortable: true },
+  { label: '排名', prop: 'rank', sortable: true, defaultSort: 'descending' },
+  { type: 'tag', label: '人物标签', prop: 'tag', enums: TAGS, filters: TAGS, sortable: true, defaultSort: '', align: 'center', width: '300px' },
+  { type: 'link', label: '人物简介', prop: 'link', minWidth: '120px' },
+  { type: 'slot', label: '备注信息', prop: 'desc', minWidth: '140px' },
+  { type: 'slot', label: '操作', prop: 'operation', align: 'right', fixed: 'right', width: '160px' }
+]
+
+const request = (data) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      console.log(data)
+      resolve({
+        list: [
+          {
+            name: '张无忌',
+            englishName: 'William·Jefferson·Clinton',
+            sex: 1,
+            tag: 3,
+            link: '去跳转',
+            rank: 1,
+            desc: '<div style="color: red;">唱跳rap</div>',
+            avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+          },
+          {
+            name: '赵敏',
+            englishName: 'William·Jefferson·Clinton',
+            sex: 2,
+            tag: [1, 2, 3],
+            link: '去跳转',
+            rank: 4,
+            desc: '<div style="color: green;">砍人手</div>',
+            avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+          },
+          {
+            name: '周芷若',
+            englishName: 'William·Jefferson·Clinton',
+            sex: 1,
+            tag: [2, 3],
+            link: '去跳转',
+            rank: 3,
+            desc: '<div style="color: green;">绿茶</div>',
+            avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+          },
+          {
+            name: '灭绝师太',
+            englishName: 'William·Jefferson·Clinton',
+            sex: 2,
+            tag: [2, 3],
+            link: '去跳转',
+            rank: 2,
+            desc: '<div style="color: green;">绿茶</div>',
+            avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+          }
+        ],
+        totalCount: 4
+      })
+    }, 300)
+  })
+}
+
+export default {
+  name: 'TableDemo',
+  data() {
+    return {
+      COLUMNS,
+      request,
+      dataSource: [
+        {
+          name: '张无忌',
+          englishName: 'William·Jefferson·Clinton',
+          sex: 1,
+          tag: 3,
+          link: '去跳转',
+          desc: '<div style="color: red;">唱跳rap</div>',
+          avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+        },
+        {
+          name: '赵敏',
+          englishName: 'William·Jefferson·Clinton',
+          sex: 2,
+          tag: [1, 2, 3],
+          link: '去跳转',
+          desc: '<div style="color: green;">砍人手</div>',
+          avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+        },
+        {
+          name: '周芷若',
+          englishName: 'William·Jefferson·Clinton',
+          sex: 1,
+          tag: [2, 3],
+          link: '去跳转',
+          desc: '<div style="color: green;">绿茶</div>',
+          avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+        },
+        {
+          name: '灭绝师太',
+          englishName: 'William·Jefferson·Clinton',
+          sex: 2,
+          tag: [2, 3],
+          link: '去跳转',
+          desc: '<div style="color: green;">绿茶</div>',
+          avator: 'https://q6.itc.cn/q_70/images03/20240713/c52e0205a8824af4b1c0b94063e5a0f7.jpeg'
+        }
+      ]
+    }
+  }
+}
+</script>

package/src/views/toolbar.vue

@@ -0,0 +1,30 @@
+<template>
+  <iov-pro-toolbar
+    :config="CONFIG"
+  />
+</template>
+
+<script>
+const CONFIG = [
+  'refresh',
+  'zoom',
+  'setting',
+  {
+    icon: 'icon-search',
+    onClick: () => console.log(111111111)
+  },
+  {
+    image: 'https://pre-tms.cu-sc.com:18100/com-app/favicon.ico',
+    onClick: () => console.log(222222222)
+  }
+]
+
+export default {
+  name: 'ToolbarDemo',
+  data() {
+    return {
+      CONFIG
+    }
+  }
+}
+</script>

package/vue.config.js

@@ -0,0 +1,22 @@
+const { defineConfig } = require('@vue/cli-service')
+const path = require('path')
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  publicPath: process.env.VUE_APP_ROUTER,
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    devtool: process.env.NODE_ENV !== 'production' ? 'eval-source-map' : undefined,
+    name: 'iov-pro-components',
+    resolve: {
+      alias: {
+        '@': path.join(__dirname, 'src')
+      }
+    }
+  },
+  chainWebpack: (config) => {
+    config.resolve.alias
+      .set('vue$', 'vue/dist/vue.esm.js')
+  }
+})