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