From d9ff532fdb2329709c89c16609cac6b2d56a50c9 Mon Sep 17 00:00:00 2001 From: pengYYYYY Date: Tue, 16 Nov 2021 19:01:03 +0800 Subject: [PATCH] feat: update list, form, detail --- index.html | 2 +- src/components/card/index.vue | 13 +- src/components/color.vue | 8 +- src/components/result/index.vue | 16 +- src/components/thumbnail/index.vue | 6 +- src/components/trend/index.vue | 26 +- src/interface.ts | 4 + .../detail/advanced/components/Product.vue | 60 +++ src/pages/detail/advanced/constants.ts | 154 ++++++ src/pages/detail/advanced/index.less | 53 +- src/pages/detail/advanced/index.vue | 462 +++++------------- src/pages/detail/base/constants.ts | 78 +++ src/pages/detail/base/index.less | 45 +- src/pages/detail/base/index.vue | 85 ++-- src/pages/detail/deploy/constants.ts | 115 +++++ src/pages/detail/secondary/index.less | 13 +- src/pages/detail/secondary/index.vue | 331 +++---------- src/pages/form/base/constants.ts | 42 ++ src/pages/form/base/index.less | 151 ++++++ src/pages/form/step/constants.ts | 53 ++ src/pages/form/step/index.vue | 385 ++++----------- src/pages/list/base/constants.ts | 48 ++ src/pages/list/select/index.vue | 2 - src/pages/result/fail/index.vue | 5 +- src/pages/result/success/index.vue | 14 +- src/store/index.ts | 3 +- src/store/modules/notification.ts | 12 + src/utils/hooks.ts | 27 + vite.config.ts | 4 +- 29 files changed, 1164 insertions(+), 1053 deletions(-) create mode 100644 src/interface.ts create mode 100644 src/pages/detail/advanced/components/Product.vue create mode 100644 src/pages/detail/advanced/constants.ts create mode 100644 src/pages/detail/base/constants.ts create mode 100644 src/pages/detail/deploy/constants.ts create mode 100644 src/pages/form/base/constants.ts create mode 100644 src/pages/form/step/constants.ts create mode 100644 src/pages/list/base/constants.ts create mode 100644 src/utils/hooks.ts diff --git a/index.html b/index.html index c226fd1..24f381e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - TDesign Pro Vue3 + TDesign Starter Vue Next
diff --git a/src/components/card/index.vue b/src/components/card/index.vue index c022684..9ff9dcd 100644 --- a/src/components/card/index.vue +++ b/src/components/card/index.vue @@ -3,10 +3,7 @@
{{ title }} - {{ describe }} + {{ describe }} @@ -15,10 +12,7 @@
-
+
+ + diff --git a/src/pages/detail/advanced/constants.ts b/src/pages/detail/advanced/constants.ts new file mode 100644 index 0000000..704673b --- /dev/null +++ b/src/pages/detail/advanced/constants.ts @@ -0,0 +1,154 @@ +export const BASE_INFO_DATA = [ + { + name: '合同名称', + value: '总部办公用品采购项目', + type: null, + }, + { + name: '合同状态', + value: '履行中', + type: { + key: 'contractStatus', + value: 'inProgress', + }, + }, + { + name: '合同编号', + value: 'BH00010', + type: null, + }, + { + name: '合同类型', + value: '主合同', + type: null, + }, + { + name: '合同收付类型', + value: '付款', + type: null, + }, + { + name: '合同金额', + value: '5,000,000元', + type: null, + }, + { + name: '甲方', + value: '腾讯科技（深圳）有限公司', + type: null, + }, + { + name: '乙方', + value: '欧尚', + type: null, + }, + { + name: '合同签订日期', + value: '2020-12-20', + type: null, + }, + { + name: '合同生效日期', + value: '2021-01-20', + type: null, + }, + { + name: '合同结束日期', + value: '2022-12-20', + type: null, + }, + { + name: '合同附件', + value: '总部办公用品采购项目合同.pdf', + type: { + key: 'contractAnnex', + value: 'pdf', + }, + }, + { + name: '备注', + value: '--', + type: null, + }, + { + name: '创建时间', + value: '2020-12-22 10:00:00', + type: null, + }, +]; + +export const TABLE_COLUMNS_DATA = [ + { + align: 'center', + minWidth: '250', + ellipsis: true, + colKey: 'index', + title: '申请号', + sorter: (a, b) => a.index.substr(3) - b.index.substr(3), + }, + { + minWidth: '100', + ellipsis: true, + colKey: 'pdName', + title: '产品名称', + sorter: (a, b) => a.pdName.length - b.pdName.length, + }, + { + minWidth: '250', + ellipsis: true, + colKey: 'pdNum', + title: '产品编号', + }, + { + minWidth: '100', + ellipsis: true, + colKey: 'purchaseNum', + title: '采购数量', + sorter: (a, b) => a.purchaseNum - b.purchaseNum, + }, + { + minWidth: '100', + ellipsis: true, + colKey: 'adminName', + title: '申请部门', + }, + { + minWidth: '250', + className: 'test', + ellipsis: true, + colKey: 'updateTime', + title: '创建时间', + sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime), + }, + { + align: 'left', + width: 200, + className: 'test2', + ellipsis: true, + colKey: 'op', + title: '操作', + }, +]; + +export const PRODUCT_LIST = [ + { + name: 'Macbook Pro 2021', + subTitle: 'Macbook Pro 2021', + size: '13.3 英寸', + cpu: 'Apple M1', + memory: 'RAM 16GB', + info: '最高可选配 16GB 内存 · 最高可选配 2TB 存储设备 电池续航最长达 18 小时', + use: 1420, + stock: 1500 + }, + { + name: 'Surface Laptop Go', + subTitle: '微软（Microsoft Corporation）', + size: '12.4 英寸', + cpu: 'Core i7', + memory: 'RAM 16GB', + info: '常规使用 Surface，续航时间最长可达13小时 随时伴您工作', + use: 120, + stock: 2000 + } +] \ No newline at end of file diff --git a/src/pages/detail/advanced/index.less b/src/pages/detail/advanced/index.less index 5a0f7ff..85192b7 100644 --- a/src/pages/detail/advanced/index.less +++ b/src/pages/detail/advanced/index.less @@ -8,13 +8,19 @@ color: rgba(0, 0, 0, .6) !important; } +.t-table.t-size-l th, +.t-table.t-size-l td { + padding: 13px 13px 12px 24px; + line-height: 22px; +} + .row-padding { padding-top: 30px; padding-left: 20px; } -.operater-block-container { - padding: 10px 0 30px; +.t-tag.t-size-s { + margin-left: 8px; } .operater-add { @@ -27,6 +33,14 @@ border: dashed 1px #dedede; border-radius: 3px; + .operater-sub-icon { + background: #ecf2fe; + color: @brand-color; + font-size: 33px; + padding: 8px; + border-radius: 100%; + } + .operater-sub { font-size: 14px; color: @text-color-secondary; @@ -41,7 +55,7 @@ svg { rect { - fill: @brand-color-2; + fill: @brand-color-1; } path { @@ -68,7 +82,15 @@ .operater-content { padding: 20px 32px 24px 32px; height: 256px; - + + .operater-title-icon { + background: #ecf2fe; + color: @brand-color; + font-size: 56px; + padding: 14px; + border-radius: 100%; + } + .operater-title { margin-bottom: 25px; position: relative; @@ -88,7 +110,10 @@ } &-tag { - margin-right: 8px; + margin-right: 4px; + margin-top: 8px; + margin-left: unset; + border: unset } &-icon { @@ -124,7 +149,7 @@ &-icon { position: absolute; - bottom: 0; + bottom: 8px; right: 0; } } @@ -134,6 +159,7 @@ position: absolute; width: 100%; bottom: 0px; + left: 0; .t-progress--thin { display: unset; @@ -152,9 +178,8 @@ &-panel { background-color: white; - padding: @spacer-3; + padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4; border-radius: @border-radius; - margin-top: 16px; } &-search-input { @@ -163,13 +188,12 @@ } &-operater-row { - margin-bottom: 12px; + margin-bottom: 32px; } &-operater-title { font-size: 20px; color: rgba(0, 0, 0, .9); - font-weight: bold; } &-operater-label { @@ -178,8 +202,17 @@ } } +.advanced-card { + margin-top: 0 !important; + + .card-title-default { + margin-bottom: 12px; + } +} + .info-block { column-count: 2; + margin-bottom: 12px; .info-item { padding: 12px 0; diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue index a57f3a9..c5f6fa1 100644 --- a/src/pages/detail/advanced/index.vue +++ b/src/pages/detail/advanced/index.vue @@ -1,286 +1,68 @@ -
- + + + + diff --git a/src/pages/form/base/constants.ts b/src/pages/form/base/constants.ts new file mode 100644 index 0000000..3265edd --- /dev/null +++ b/src/pages/form/base/constants.ts @@ -0,0 +1,42 @@ +export const FORM_RULES = { + name: [{ required: true, message: '请输入合同名称', type: 'error' }], + type: [{ required: true, message: '请选择合同类型', type: 'error' }], + payment: [{ required: true, message: '请选择合同收付类型', type: 'error' }], + amount: [{ required: true, message: '请输入合同金额', type: 'error' }], + partyA: [{ required: true, message: '请选择甲方', type: 'error' }], + partyB: [{ required: true, message: '请选择乙方', type: 'error' }], + signDate: [{ required: true, message: '请选择日期', type: 'error' }], + startDate: [{ required: true, message: '请选择日期', type: 'error' }], + endDate: [{ required: true, message: '请选择日期', type: 'error' }], +} + +export const INITIAL_DATA = { + name: '', + type: '', + partyA: '', + partyB: '', + signDate: '', + startDate: '', + endDate: '', + payment: '1', + amount: 0, + comment: '' +}; + +export const TYPE_OPTIONS = [ + { label: '类型A', value: '1' }, + { label: '类型B', value: '2' }, + { label: '类型C', value: '3' }, +] + +export const PARTY_A_OPTIONS = [ + { label: '公司A', value: '1' }, + { label: '公司B', value: '2' }, + { label: '公司C', value: '3' }, +] + +export const PARTY_B_OPTIONS = [ + { label: '公司A', value: '1' }, + { label: '公司B', value: '2' }, + { label: '公司C', value: '3' }, +] diff --git a/src/pages/form/base/index.less b/src/pages/form/base/index.less index 31ab807..ce51299 100644 --- a/src/pages/form/base/index.less +++ b/src/pages/form/base/index.less @@ -25,3 +25,154 @@ color: @text-color-secondary; line-height: 20px; } + +.form-item-container { + display: flex; + // align-items: center; + justify-content: center; +} + +.form-basic-container { + display: flex; + align-items: center; + justify-content: center; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + + .span-item { + width: 12px; + } + + .form-gap { + padding-left: 32px; + } + + .row-gap { + padding-bottom: 24px; + } + + .form-basic-item { + // padding: 0 60px 0 160px; + + .form-basic-container-title { + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 22px; + color: rgba(0, 0, 0, .9); + padding: 64px 0 32px 0; + } + + // .t-size-m { + // width: 100% !important; + // min-width: 280px; + // } + + // .t-form-item__type { + // // width: 100% !important; + // min-width: 280px; + // } + } + + .tdesign-pro-panel { + margin-top: 0px !important; + } + + .t-textarea__inner { + height: 124px !important; + } + + .form-cretifier { + font-size: 14px; + color: #000000; + padding-top: 24px; + padding-bottom: 130px; + + .form-cretifier-container { + padding-top: 12px; + + .form-cretifier-circle { + background: #0052d9; + border: 1px solid #a7a4a4; + border-radius: 40px; + width: 32px; + height: 32px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + text-align: center; + line-height: 22px; + font-weight: 500; + position: absolute; + } + + .form-cretifier-gap1 { + margin-left: 25px; + } + + .form-cretifier-gap2 { + margin-left: 50px; + } + + .form-cretifier-blure { + background: #d4e3fc; + color: #0052d9; + } + } + } +} + +.form-submit-container { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding-top: 30px; + padding-bottom: 28px; + background-color: #e3e6eb; + border-bottom: solid 1px #d8dadf; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + + .form-submint-sub { + width: 676px; + display: flex; + align-items: center; + justify-content: space-between; + + .form-submit-left { + + .form-submit-upload-span { + font-size: 14px; + line-height: 22px; + color: rgba(0, 0, 0, .4); + padding-top: 8px; + display: inline-block; + } + } + + .form-submit-upload-btn { + width: 144px; + height: 40px; + } + + .form-submit-right { + + .form-submit-cancel { + font-size: 16px !important; + color: #0052d9 !important; + background-color: #ebedf100 !important; + } + + .form-submit-confirm { + font-size: 16px !important; + background: #0052d9 !important; + border-radius: 3px !important; + width: 80px !important; + height: 40px !important; + } + } + } +} diff --git a/src/pages/form/step/constants.ts b/src/pages/form/step/constants.ts new file mode 100644 index 0000000..be20baf --- /dev/null +++ b/src/pages/form/step/constants.ts @@ -0,0 +1,53 @@ +export const FORM_RULES = { + name: [{ required: true, message: '请选择合同名称', type: 'error' }], + type: [{ required: true, message: '请选择发票类型', type: 'error' }], + title: [{ required: true, message: '请输入发票抬头', type: 'error' }], + taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }], + consignee: [{ required: true, message: '请输入收货人', type: 'error' }], + mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }], + deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }], + fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }], +}; + +export const NAME_OPTIONS = [ + { label: '合同A', value: '1' }, + { label: '合同B', value: '2' }, + { label: '合同C', value: '3' }, +]; + +export const TYPE_OPTIONS = [ + { label: '类型A', value: '1' }, + { label: '类型B', value: '2' }, + { label: '类型C', value: '3' }, +]; + +export const ADDRESS_OPTIONS = [ + { label: '广东省深圳市南山区', value: '1' }, + { label: '北京市海淀区', value: '2' }, + { label: '上海市徐汇区', value: '3' }, + { label: '四川省成都市高新区', value: '4' }, + { label: '广东省广州市天河区', value: '5' }, + { label: '陕西省西安市高新区', value: '6' }, +]; + +export const INITIAL_DATA1 = { + name: '', + type: '', +}; + +export const INITIAL_DATA2 = { + title: '', + taxNum: '', + address: '', + bank: '', + bankAccount: '', + email: '', + tel: '', +}; + +export const INITIAL_DATA3 = { + consignee: '', + mobileNum: '', + deliveryAddress: '', + fullAddress: '', +}; \ No newline at end of file diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue index 2b90d43..1d6ffd2 100644 --- a/src/pages/form/step/index.vue +++ b/src/pages/form/step/index.vue @@ -1,12 +1,8 @@