| 提交 | 用户 | age | ||
| f353bc | 1 | <template> |
| S | 2 | <div :class="prefixCls"> |
| b5c161 | 3 | <!-- <BasicForm @register="registerForm"></BasicForm>--> |
| f353bc | 4 | <div class="mb-15px"> |
| S | 5 | <div class="mb-15px "> |
| 6 | <div :class="`${prefixCls}__label`">系统标签</div> | |
| 7 | <div>暂无数据</div> | |
| 8 | </div> | |
| 9 | <div class="mb-15px"> | |
| 10 | <div :class="`${prefixCls}__label`">首次跟进时间</div> | |
| 11 | <div>暂无数据</div> | |
| 12 | </div> | |
| 13 | <div class=""> | |
| 14 | <div :class="`${prefixCls}__label`">未联系天数</div> | |
| 15 | <div>10</div> | |
| 16 | </div> | |
| 17 | </div> | |
| 18 | <Divider /> | |
| 19 | <h3>公司信息</h3> | |
| 20 | <Description @register="register" class="mt-4" /> | |
| 21 | <Divider /> | |
| 22 | <h3>联系人</h3> | |
| 23 | <Description @register="register" class="mt-4" /> | |
| 24 | <Divider /> | |
| 25 | <h3>系统信息</h3> | |
| 26 | <Description @register="register" class="mt-4" /> | |
| 27 | </div> | |
| 28 | </template> | |
| 29 | <script lang="ts" setup> | |
| 30 | import { List, Tag, Divider } from 'ant-design-vue'; | |
| 31 | import Icon from '@/components/Icon/Icon.vue'; | |
| 32 | import {BasicForm, FormSchema, useForm} from '@/components/Form'; | |
| 33 | import dayjs from "dayjs"; | |
| 34 | import {treeOptionsListApi} from "@/api/demo/tree"; | |
| 35 | import {getAllRoleList} from "@/api/demo/system"; | |
| 36 | import {DescItem, Description, useDescription} from "@/components/Description"; | |
| 37 | ||
| 38 | const formSchema: FormSchema[] = [ | |
| 39 | { | |
| 40 | field: 'field33', | |
| 41 | component: 'ApiTreeSelect', | |
| 42 | label: '线索来源', | |
| 43 | // helpMessage: ['ApiTreeSelect组件', '使用接口提供的数据生成选项'], | |
| 44 | required: true, | |
| 45 | componentProps: { | |
| 46 | api: treeOptionsListApi, | |
| 47 | treeCheckable: true, | |
| 48 | resultField: 'list', | |
| 49 | onChange: (e, v) => { | |
| 50 | console.log('ApiTreeSelect====>:', e, v); | |
| 51 | }, | |
| 52 | }, | |
| 53 | colProps: { | |
| 54 | span: 24, | |
| 55 | }, | |
| 56 | }, | |
| 57 | { | |
| 58 | component: 'Select', | |
| 59 | label: '线索状态', | |
| 60 | field: 'date1', | |
| 61 | colProps: { span: 24 }, | |
| 62 | componentProps: { | |
| 63 | options: [ | |
| 64 | { | |
| 65 | label: '待处理', | |
| 66 | value: '1', | |
| 67 | }, | |
| 68 | { | |
| 69 | label: '完善信息', | |
| 70 | value: '2', | |
| 71 | }, | |
| 72 | { | |
| 73 | label: '初步触达', | |
| 74 | value: '3', | |
| 75 | }, | |
| 76 | { | |
| 77 | label: '联系互动', | |
| 78 | value: '4', | |
| 79 | }, | |
| 80 | ], | |
| 81 | }, | |
| 82 | defaultValue:'1' | |
| 83 | }, | |
| 84 | { | |
| 85 | label: '国家地区', | |
| 86 | field: 'country', | |
| 87 | component: 'ApiSelect', | |
| 88 | componentProps: { | |
| 89 | api: getAllRoleList, | |
| 90 | labelField: 'roleName', | |
| 91 | valueField: 'roleValue', | |
| 92 | }, | |
| 93 | }, | |
| 94 | { | |
| 95 | label: '线索备注', | |
| 96 | field: 'field0', | |
| 97 | component: 'InputTextArea', | |
| 98 | componentProps:{ | |
| 99 | placeholder: '请输入备注内容', | |
| 100 | }, | |
| 101 | colProps: { | |
| 102 | span: 24, | |
| 103 | }, | |
| 104 | }, | |
| 105 | ]; | |
| 106 | ||
| 107 | const mockData: Recordable = { | |
| 108 | cluesName: 'test', | |
| 109 | nickName: 'VB', | |
| 110 | age: '123', | |
| 111 | phone: '15695909xxx', | |
| 112 | email: '190848757@qq.com', | |
| 113 | companyname: '公司名称111', | |
| 114 | sex: '男', | |
| 115 | certy: '3504256199xxxxxxxxx', | |
| 116 | tag: 'orange', | |
| 117 | }; | |
| 118 | ||
| 119 | const schema: DescItem[] = [ | |
| 120 | { | |
| 121 | field: 'cluesName', | |
| 122 | label: '线索名称', | |
| 123 | }, | |
| 124 | ||
| 125 | { | |
| 126 | field: 'companyname', | |
| 127 | label: '公司名称', | |
| 128 | }, | |
| 129 | { | |
| 130 | field: 'phone', | |
| 131 | label: '联系电话', | |
| 132 | }, | |
| 133 | { | |
| 134 | field: 'email', | |
| 135 | label: '邮箱', | |
| 136 | }, | |
| 137 | { | |
| 138 | field: 'phone', | |
| 139 | label: '座机', | |
| 140 | render: (curVal, data) => { | |
| 141 | return `${data.nickName}-${curVal}`; | |
| 142 | }, | |
| 143 | }, | |
| 144 | ]; | |
| 145 | ||
| 146 | const [registerForm] = useForm({ | |
| 147 | layout: 'vertical', | |
| 148 | baseColProps: { span: 24 }, | |
| 149 | schemas: formSchema, | |
| 150 | showActionButtonGroup: false, | |
| 151 | }); | |
| 152 | ||
| 153 | const [register] = useDescription({ | |
| 154 | // title: '无边框', | |
| 155 | layout: 'vertical', | |
| 156 | bordered: false, | |
| 157 | column: 1, | |
| 158 | labelStyle:{ | |
| 159 | color: '#909090', | |
| 160 | // fontSize: '12px', | |
| 161 | }, | |
| 162 | data: mockData, | |
| 163 | schema: schema, | |
| 164 | }); | |
| 165 | ||
| 166 | const prefixCls = 'clues-tab-detail'; | |
| 167 | </script> | |
| 168 | <style lang="less" scoped> | |
| 169 | .clues-tab-detail { | |
| 170 | background-color: @component-background; | |
| 171 | &__title { | |
| 172 | margin-bottom: 12px; | |
| 173 | font-size: 18px; | |
| 174 | } | |
| 175 | ||
| 176 | &__content { | |
| 177 | color: @text-color-secondary; | |
| 178 | } | |
| 179 | ||
| 180 | &__label { | |
| 181 | color: @text-color-secondary; | |
| 182 | } | |
| 183 | ||
| 184 | &__action { | |
| 185 | display: inline-block; | |
| 186 | padding: 0 16px; | |
| 187 | color: @text-color-secondary; | |
| 188 | ||
| 189 | &:nth-child(1), | |
| 190 | &:nth-child(2) { | |
| 191 | border-right: 1px solid rgb(206 206 206 / 40%); | |
| 192 | } | |
| 193 | ||
| 194 | &-icon { | |
| 195 | margin-right: 3px; | |
| 196 | } | |
| 197 | } | |
| 198 | ||
| 199 | &__time { | |
| 200 | position: absolute; | |
| 201 | right: 20px; | |
| 202 | color: rgb(0 0 0 / 45%); | |
| 203 | } | |
| 204 | } | |
| 205 | </style> | |
