iov-pro-components 0.0.3

package/docs/components/space.md

@@ -0,0 +1,35 @@
+# 间隔 Space
+
+## 基础使用
+
+::: demo
+```html
+<template>
+  <iov-pro-space space="12px">
+    <span style="background-color: lightgrey">块1</span>
+    <span style="background-color: lightgrey">块2</span>
+  </iov-pro-space>
+</template>
+```
+:::
+
+## 水平展示
+
+::: demo
+```html
+<template>
+  <iov-pro-space space="12px" direction="horizontal">
+    <span style="background-color: lightgrey">块1</span>
+    <span style="background-color: lightgrey">块2</span>
+  </iov-pro-space>
+</template>
+```
+:::
+
+## Request Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| space | 间隔大小 | Number | -  | - |
+| direction | 间距方向 | String | vertical / horizontal | - |
+| align | 对其方式 如果水平对其，则值为align-items属性值，如果垂直对其，则值为justify-content属性值 | String | - | - |

package/docs/components/sub-title.md

@@ -0,0 +1,24 @@
+# 小标题 SubTitle
+
+## 基础使用
+
+::: demo
+```html
+<template>
+  <iov-pro-sub-title
+    name="小标题"
+    icon="https://element.eleme.cn/favicon.ico"
+    desc="描述文案"
+  />
+</template>
+```
+:::
+
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| name | 模块标题 | String | -  | - |
+| icon | 页面icon，支持 url，require 本地图片 | String | - | - |
+| desc | 页面描述信息 | String | - | - |

package/docs/components/submit-module.md

@@ -0,0 +1,24 @@
+# 提交按钮模块 SubmitModule
+
+## 基础使用
+::: demo
+```html
+<template>
+  <div class="app-container">
+    见下方：
+    <iov-pro-submit-module left="500" right="100">
+      <el-button size="small" round>取消</el-button>
+      <el-button size="small" type="primary" round>确定</el-button>
+    </iov-pro-submit-module>
+  </div>
+</template>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| left | 距离左侧距离 | String | -  | - |
+| right | 距离右侧距离 | String | - | - |
+

package/docs/template/add.md

@@ -0,0 +1,124 @@
+---
+pageClass: grey-background-demo-content
+---
+
+## 新增页
+
+::: demo
+```html
+<template>
+  <div class="add-demo app-container">
+    <iov-pro-space :space="10">
+      <iov-pro-page-module name="新增DEMO页">
+        <iov-pro-sub-title name="表单页面1" />
+        <iov-pro-form
+          ref="form1"
+          :items="ITEMS"
+          :config="{ grid: true, labelPosition: 'top', gutter: 20 }"
+        />
+      </iov-pro-page-module>
+
+      <iov-pro-page-module name="表单页面2" is-sub>
+        <iov-pro-form
+          ref="form2"
+          :items="ITEMS"
+          :config="{ grid: true, labelPosition: 'top', gutter: 20 }"
+        />
+      </iov-pro-page-module>
+    </iov-pro-space>
+    <iov-pro-submit-module>
+      <el-button round size="small">取消</el-button>
+      <el-button type="primary" round size="small" @click="onConfirm">确定</el-button>
+    </iov-pro-submit-module>
+  </div>
+</template>
+
+<script>
+// 表单项配置
+const ITEMS = [
+  {
+    label: '名称',
+    name: 'name',
+    type: 'input',
+    span: 12,
+    rules: {
+      required: true,
+      message: '请输入名称',
+      trigger: 'blur'
+    }
+  },
+  {
+    label: '公司',
+    name: 'companyNo',
+    type: 'select',
+    rules: {
+      required: true,
+      message: '请选择公司',
+      trigger: 'change'
+    }
+  },
+  {
+    label: '店铺',
+    name: 'shopNo',
+    type: 'select',
+    rules: {
+      required: true,
+      message: '请选择店铺',
+      trigger: 'change'
+    }
+  },
+  {
+    label: '时间范围',
+    name: ['startTime', 'endTime'],
+    type: 'date-picker',
+    span: 12,
+    props: {
+      type: 'datetimerange'
+    },
+    rules: {
+      required: true,
+      message: '请选择',
+      trigger: 'change'
+    }
+  },
+  {
+    label: '描述',
+    name: 'desc',
+    type: 'input',
+    span: 24,
+    props: {
+      type: 'textarea',
+      maxlength: '100',
+      showWordLimit: true
+    },
+    rules: {
+      required: true,
+      message: '请输入描述',
+      trigger: 'change'
+    }
+  }
+]
+
+export default {
+  data() {
+    return {
+      formData: {},
+      ITEMS
+    }
+  },
+  methods: {
+    /**
+     * 用户确认输入
+     */
+    async onConfirm() {
+      // 校验表单输入
+      await Promise.all([
+        this.$refs.form1.validate(),
+        this.$refs.form2.validate()
+      ])
+    }
+  }
+}
+</script>
+```
+:::

package/docs/template/confirm.md

@@ -0,0 +1,28 @@
+## confirm提示框
+
+::: demo
+```vue
+<template>
+<el-button round size="small" type="primary" @click.stop="confirm">确认按钮</el-button>
+</template>
+<script>
+
+export default {
+  methods: {
+    async confirm() {
+      try {
+        await this.$confirm('确认框提示语', '', {
+          type: 'warning',
+          customClass: 'message-box-no-title',
+          roundButton: true
+        })
+        this.$message.success('操作成功')
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+```
+:::

package/docs/template/detail.md

@@ -0,0 +1,240 @@
+---
+pageClass: grey-background-demo-content
+---
+
+## 详情页模板
+
+::: demo
+```vue
+<template>
+  <iov-pro-request
+    :api="apiMock"
+    :params="{tenantNo}"
+    :default="{ data: {} }"
+  >
+    <template #default="{ data }">
+      <iov-pro-space space="10" class="template-detail">
+        <iov-pro-page-detail
+          :name="data.tenantName"
+          :status-text="data.statusName"
+          :status-type="['info', 'success'][data&&data.status]"
+          :desc="`租户编码：${data.tenantNo}`"
+          :help="[`创建人：${data.creatorFullName}`, `创建时间：${data.createTime}`]"
+          icon="https://element.eleme.cn/favicon.ico"
+        >
+          <iov-pro-description
+            :data-source="data"
+            :items="TENANT_ITEMS"
+            label-width="210px"
+            class="detail-description"
+          />
+          <div class="table-box">
+            <iov-pro-sub-title
+              icon="https://element.eleme.cn/favicon.ico"
+              name="应用列表"
+            />
+            <iov-pro-table
+              :columns="COLUMNS"
+              :request="{ api: apiMockList, params: { tenantNo } }"
+              class="detail-table"
+              :config="{ table: { border: true } }"
+            />
+          </div>
+        </iov-pro-page-detail>
+        <iov-pro-page-module name="基本信息" is-sub>
+          <iov-pro-description
+            :data-source="data"
+            :items="BASIC_LOGIN_ITEMS"
+            label-width="180px"
+          />
+        </iov-pro-page-module>
+        <iov-pro-page-module name="登录信息" is-sub>
+          <iov-pro-description
+            :data-source="data"
+            :items="SSO_LOGIN_ITEMS"
+            label-width="180px"
+          />
+        </iov-pro-page-module>
+      </iov-pro-space>
+    </template>
+  </iov-pro-request>
+</template>
+
+<script>
+const TENANT_ITEMS = [
+  { label: '租户代码', prop: 'alias' },
+  { label: '统一信用代码', prop: 'usci' }
+]
+
+const STATUS = [
+  { label: '启用', value: 1, type: 'success' },
+  { label: '停用', value: 0, type: 'info' }
+]
+
+const COLUMNS = [
+  { label: '应用编码', prop: 'applicationId', minWidth: '120px' },
+  { label: '应用名称', prop: 'applicationName', minWidth: '200px', showOverflowTooltip: true },
+  { label: 'ClientID', prop: 'clientId', minWidth: '300px' },
+  { type: 'tag', label: '状态', prop: 'status', align: 'right', minWidth: '140px', enums: STATUS, filters: STATUS, config: { fieldKey: 'appStatus' }}
+]
+
+const BASIC_LOGIN_ITEMS = [
+  { label: '应用首页地址', prop: 'indexPageUrl' },
+  { label: '外部appid', prop: 'openAppKey' },
+  { label: '访问令牌有效期(秒)', prop: 'accessTokenTerm' },
+]
+
+// SSO登录配置
+const SSO_LOGIN_ITEMS = [
+  { label: '客户端id', prop: 'clientId' },
+  { label: '客户端密钥', prop: 'clientSecret' },
+]
+
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve(
+      {
+        "alias": "CUSC",
+        "createTime": "2022-02-08 10:01:50",
+        "creator": "",
+        "creatorFullName": "",
+        "id": 1,
+        "operator": "6515104331f64d648a5659b74f0d3a57",
+        "operatorFullName": "孙开(智网)",
+        "status": 1,
+        "statusName": "启用",
+        "tenantName": "智网",
+        "tenantNo": "1",
+        "updateTime": "2023-08-07 15:28:51",
+        "usci": "",
+        indexPageUrl: 'https://www.baidu.com/',
+        openAppKey: 'alll1091899sjj18981',
+        accessTokenTerm: '1800',
+        clientId: 'i129jk91289837372',
+        clientSecret: 'o19276734jdhey78',
+    }), 1000)
+  })
+}
+const apiMockList = (params) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve(
+      {
+        "currPage": 1,
+        "hasMore": true,
+        "list": [
+            {
+                "applicationId": "41",
+                "applicationName": "新运管工单管理后台",
+                "clientId": "42be50a76bae4f468b2688605076ae5c",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            },
+            {
+                "applicationId": "43",
+                "applicationName": "技术中台-文件服务门户控制台",
+                "clientId": "65420f241ce64336895c91778aa332e1",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            },
+            {
+                "applicationId": "42",
+                "applicationName": "lujk测试app",
+                "clientId": "c8b0057253ed4c50a2c70e3dd3244415",
+                "isBind": false,
+                "status": 0,
+                "statusName": "禁用"
+            },
+            {
+                "applicationId": "41",
+                "applicationName": "新运管工单管理后台",
+                "clientId": "42be50a76bae4f468b2688605076ae5c",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            },
+            {
+                "applicationId": "40",
+                "applicationName": "购卡企业使用人实名登记门户",
+                "clientId": "6adf2496a51f4dd8a9dc5d113887bbf8",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            },
+            {
+                "applicationId": "39",
+                "applicationName": "数智运营",
+                "clientId": "9d2f4e97af8548379a7f837d630051f5",
+                "isBind": false,
+                "status": 0,
+                "statusName": "禁用"
+            },
+            {
+                "applicationId": "38",
+                "applicationName": "HMI管理后台",
+                "clientId": "e1f48d80d3164b4cb17655a37745fa5a",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            },
+            {
+                "applicationId": "37",
+                "applicationName": "新增用户DEMO_01",
+                "clientId": "13652d113f47492a910151ec72307a5d",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            },
+            {
+                "applicationId": "36",
+                "applicationName": "技术中台-监控",
+                "clientId": "fcd81ed26a7045cd9233d8daf95c9bbe",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            },
+            {
+                "applicationId": "35",
+                "applicationName": "客服V8",
+                "clientId": "8a68d3d71d6f49d29c460090d1681f0b",
+                "isBind": false,
+                "status": 1,
+                "statusName": "启用"
+            }
+        ],
+        "pageSize": 10,
+        "totalCount": 38
+    }), 1000)
+  })
+}
+const appState = [
+  { label: '启用', value: 1, type: 'success' },
+  { label: '停用', value: 0, type: 'info' }
+]
+
+export default {
+  data() {
+    return {
+      apiMock,
+      apiMockList,
+      TENANT_ITEMS,
+      COLUMNS,
+      tenantNo: '1',
+      BASIC_LOGIN_ITEMS,
+      SSO_LOGIN_ITEMS
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+.template-detail .table-box {
+  padding-top: 20px;
+}
+</style>
+```
+:::