显示 placeholder
This commit is contained in:
		
							parent
							
								
									c037a3ab53
								
							
						
					
					
						commit
						9df3582913
					
				| 
						 | 
					@ -47,7 +47,7 @@
 | 
				
			||||||
            v-else-if="item.type === 'select'"
 | 
					            v-else-if="item.type === 'select'"
 | 
				
			||||||
            v-model:value="modelValue[field]"
 | 
					            v-model:value="modelValue[field]"
 | 
				
			||||||
            style="width: 100%"
 | 
					            style="width: 100%"
 | 
				
			||||||
            :placeholder="getPlaceholder(item)"
 | 
					            :placeholder="item.placeholder"
 | 
				
			||||||
            v-bind="item.componentsProps"
 | 
					            v-bind="item.componentsProps"
 | 
				
			||||||
            :allowClear="item.componentsProps?.allowClear ?? true"
 | 
					            :allowClear="item.componentsProps?.allowClear ?? true"
 | 
				
			||||||
            :options="item.options"
 | 
					            :options="item.options"
 | 
				
			||||||
| 
						 | 
					@ -167,8 +167,8 @@ const getResponsive = (item: FormProMaxItemProps): Grid => {
 | 
				
			||||||
//优先级: 组件本身=》formItem=》label
 | 
					//优先级: 组件本身=》formItem=》label
 | 
				
			||||||
const getPlaceholder = function (item: FormProMaxItemProps) {
 | 
					const getPlaceholder = function (item: FormProMaxItemProps) {
 | 
				
			||||||
  // console.log('getPlaceholder____________________________', item)
 | 
					  // console.log('getPlaceholder____________________________', item)
 | 
				
			||||||
  console.log('getPlaceholder_______________________placeholder', item.placeholder)
 | 
					  // console.log('getPlaceholder_______________________placeholder', item.placeholder)
 | 
				
			||||||
  console.log(item.componentsProps?.placeholder ?? item.placeholder ?? (item.type.includes('input') ? `请输入${item.label}` : `请选择${item.label}`))
 | 
					  // console.log(item.componentsProps?.placeholder ?? item.placeholder ?? (item.type.includes('input') ? `请输入${item.label}` : `请选择${item.label}`))
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return item.componentsProps?.placeholder ?? item.placeholder ?? (item.type.includes('input') ? `请输入${item.label}` : `请选择${item.label}`)
 | 
					  return item.componentsProps?.placeholder ?? item.placeholder ?? (item.type.includes('input') ? `请输入${item.label}` : `请选择${item.label}`)
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -17,9 +17,9 @@
 | 
				
			||||||
        </a-space>
 | 
					        </a-space>
 | 
				
			||||||
      </template>
 | 
					      </template>
 | 
				
			||||||
    </TableProMax>
 | 
					    </TableProMax>
 | 
				
			||||||
    <a-modal v-model:open="visible" :title="serviceTitle" @ok="submit" @cancel="closeModal">
 | 
					    <!-- <a-modal v-model:open="visible" :title="serviceTitle" @ok="submit" @cancel="closeModal">
 | 
				
			||||||
      <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions" />
 | 
					      <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions" />
 | 
				
			||||||
    </a-modal>
 | 
					    </a-modal> -->
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -32,7 +32,7 @@ import { debounce } from 'lodash-es'
 | 
				
			||||||
import FormProMax from '@/components/form/FormProMax.vue'
 | 
					import FormProMax from '@/components/form/FormProMax.vue'
 | 
				
			||||||
import api from '@/axios'
 | 
					import api from '@/axios'
 | 
				
			||||||
// createVNode
 | 
					// createVNode
 | 
				
			||||||
import { ref, reactive, computed, onMounted } from 'vue'
 | 
					import { ref, reactive, computed, onMounted, createVNode } from 'vue'
 | 
				
			||||||
import TableProMax from '@/components/table/TableProMax.vue'
 | 
					import TableProMax from '@/components/table/TableProMax.vue'
 | 
				
			||||||
import { TableProMaxProps } from '@/types/components/table/index.ts'
 | 
					import { TableProMaxProps } from '@/types/components/table/index.ts'
 | 
				
			||||||
import { ComponentExposed } from 'vue-component-type-helpers'
 | 
					import { ComponentExposed } from 'vue-component-type-helpers'
 | 
				
			||||||
| 
						 | 
					@ -42,6 +42,7 @@ import { FormProMaxItemOptions } from '@/types/components/form//index.ts'
 | 
				
			||||||
import { FormExpose } from 'ant-design-vue/es/form/Form'
 | 
					import { FormExpose } from 'ant-design-vue/es/form/Form'
 | 
				
			||||||
import { serviceProjectSaveOrUpdateParams_ } from '@/types/views/serviceManagement'
 | 
					import { serviceProjectSaveOrUpdateParams_ } from '@/types/views/serviceManagement'
 | 
				
			||||||
import { showEnterprisesUnit } from './index.tsx'
 | 
					import { showEnterprisesUnit } from './index.tsx'
 | 
				
			||||||
 | 
					var modal: any
 | 
				
			||||||
type _FormType = EnterprisesUnitSaveOrUpdateParams & {
 | 
					type _FormType = EnterprisesUnitSaveOrUpdateParams & {
 | 
				
			||||||
  contactPersonInfoName?: string
 | 
					  contactPersonInfoName?: string
 | 
				
			||||||
  contactPersonInfoTelephone?: string
 | 
					  contactPersonInfoTelephone?: string
 | 
				
			||||||
| 
						 | 
					@ -354,7 +355,7 @@ const netType = computed(() => {
 | 
				
			||||||
const formParams = ref<{
 | 
					const formParams = ref<{
 | 
				
			||||||
  snowFlakeId?: string
 | 
					  snowFlakeId?: string
 | 
				
			||||||
  enterprisesUnitId: string
 | 
					  enterprisesUnitId: string
 | 
				
			||||||
  securityUnitId: string
 | 
					  securityUnitId: string | null
 | 
				
			||||||
  administrativeDivisionCodes?: null
 | 
					  administrativeDivisionCodes?: null
 | 
				
			||||||
  projectManagerMiniProgramUserId?: string
 | 
					  projectManagerMiniProgramUserId?: string
 | 
				
			||||||
  projectManagerMiniProgramUserName?: string
 | 
					  projectManagerMiniProgramUserName?: string
 | 
				
			||||||
| 
						 | 
					@ -374,7 +375,7 @@ const formParams = ref<{
 | 
				
			||||||
  name: '',
 | 
					  name: '',
 | 
				
			||||||
  enterprisesUnitId: '',
 | 
					  enterprisesUnitId: '',
 | 
				
			||||||
  type: 'security',
 | 
					  type: 'security',
 | 
				
			||||||
  securityUnitId: '',
 | 
					  securityUnitId: null, // 初始值得设置为null,不然 placeholder 显示不出来
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
const securityUnitIdList = ref<any>([])
 | 
					const securityUnitIdList = ref<any>([])
 | 
				
			||||||
const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdateParams_>>({
 | 
					const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdateParams_>>({
 | 
				
			||||||
| 
						 | 
					@ -395,9 +396,6 @@ const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdatePara
 | 
				
			||||||
      showSearch: true,
 | 
					      showSearch: true,
 | 
				
			||||||
      // 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。
 | 
					      // 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。
 | 
				
			||||||
      filterOption: (input: string, option: any) => {
 | 
					      filterOption: (input: string, option: any) => {
 | 
				
			||||||
        // if (option.label.toLowerCase().includes(input?.toLowerCase())) {
 | 
					 | 
				
			||||||
        //   console.log(111111111111111)
 | 
					 | 
				
			||||||
        // }
 | 
					 | 
				
			||||||
        return option.label.toLowerCase().includes(input?.toLowerCase())
 | 
					        return option.label.toLowerCase().includes(input?.toLowerCase())
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
| 
						 | 
					@ -630,7 +628,7 @@ const expandedRowRender: TableProMaxProps['expandedRowRender'] = ({ record }) =>
 | 
				
			||||||
            <a-button
 | 
					            <a-button
 | 
				
			||||||
              class='btn-warn'
 | 
					              class='btn-warn'
 | 
				
			||||||
              onClick={async () => {
 | 
					              onClick={async () => {
 | 
				
			||||||
                visible.value = true
 | 
					                // visible.value = true
 | 
				
			||||||
                serviceTitle.value = '编辑服务项目'
 | 
					                serviceTitle.value = '编辑服务项目'
 | 
				
			||||||
                idNumberDisabled.value = record.twoType.value !== 'outsource'
 | 
					                idNumberDisabled.value = record.twoType.value !== 'outsource'
 | 
				
			||||||
                formParams.value.securityUnitId = record.securityUnitId //企事业单位id
 | 
					                formParams.value.securityUnitId = record.securityUnitId //企事业单位id
 | 
				
			||||||
| 
						 | 
					@ -649,8 +647,8 @@ const expandedRowRender: TableProMaxProps['expandedRowRender'] = ({ record }) =>
 | 
				
			||||||
                formParams.value.houseTotal = record.houseTotal //户数
 | 
					                formParams.value.houseTotal = record.houseTotal //户数
 | 
				
			||||||
                formParams.value.staffTotal = record.staffTotal //工作人员数量
 | 
					                formParams.value.staffTotal = record.staffTotal //工作人员数量
 | 
				
			||||||
                formParams.value.securityUserTotal = record.securityUserTotal //保安人员数量
 | 
					                formParams.value.securityUserTotal = record.securityUserTotal //保安人员数量
 | 
				
			||||||
                {
 | 
					
 | 
				
			||||||
                  /* Modal.confirm({
 | 
					                modal = Modal.confirm({
 | 
				
			||||||
                  title: serviceTitle.value,
 | 
					                  title: serviceTitle.value,
 | 
				
			||||||
                  icon: createVNode('div'),
 | 
					                  icon: createVNode('div'),
 | 
				
			||||||
                  width: 600,
 | 
					                  width: 600,
 | 
				
			||||||
| 
						 | 
					@ -662,8 +660,7 @@ const expandedRowRender: TableProMaxProps['expandedRowRender'] = ({ record }) =>
 | 
				
			||||||
                  onCancel: async () => {
 | 
					                  onCancel: async () => {
 | 
				
			||||||
                    await closeModal()
 | 
					                    await closeModal()
 | 
				
			||||||
                  },
 | 
					                  },
 | 
				
			||||||
                }) */
 | 
					                })
 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
              }}
 | 
					              }}
 | 
				
			||||||
            >
 | 
					            >
 | 
				
			||||||
              编辑
 | 
					              编辑
 | 
				
			||||||
| 
						 | 
					@ -705,9 +702,10 @@ const expandedRowRender: TableProMaxProps['expandedRowRender'] = ({ record }) =>
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const closeModal = async () => {
 | 
					const closeModal = async () => {
 | 
				
			||||||
 | 
					  console.log(modal)
 | 
				
			||||||
  visible.value = false
 | 
					  visible.value = false
 | 
				
			||||||
  formParams.value = {
 | 
					  formParams.value = {
 | 
				
			||||||
    securityUnitId: '',
 | 
					    securityUnitId: null,
 | 
				
			||||||
    enterprisesUnitId: '',
 | 
					    enterprisesUnitId: '',
 | 
				
			||||||
    administrativeDivisionCodes: '',
 | 
					    administrativeDivisionCodes: '',
 | 
				
			||||||
    name: '',
 | 
					    name: '',
 | 
				
			||||||
| 
						 | 
					@ -724,6 +722,9 @@ const closeModal = async () => {
 | 
				
			||||||
  enterprisesUnitId.value = ''
 | 
					  enterprisesUnitId.value = ''
 | 
				
			||||||
  serviceTitle.value = '新增服务项目'
 | 
					  serviceTitle.value = '新增服务项目'
 | 
				
			||||||
  idNumberDisabled.value = false
 | 
					  idNumberDisabled.value = false
 | 
				
			||||||
 | 
					  modal.destroy()
 | 
				
			||||||
 | 
					  // console.log(modal)
 | 
				
			||||||
 | 
					  Modal.destroyAll()
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const submit = async () => {
 | 
					const submit = async () => {
 | 
				
			||||||
| 
						 | 
					@ -733,6 +734,7 @@ const submit = async () => {
 | 
				
			||||||
  message.success(resp.message)
 | 
					  message.success(resp.message)
 | 
				
			||||||
  await _tableRef.value.requestGetTableData()
 | 
					  await _tableRef.value.requestGetTableData()
 | 
				
			||||||
  await closeModal()
 | 
					  await closeModal()
 | 
				
			||||||
 | 
					  // modal.destroy()
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
onMounted(async () => {
 | 
					onMounted(async () => {
 | 
				
			||||||
| 
						 | 
					@ -740,20 +742,21 @@ onMounted(async () => {
 | 
				
			||||||
  securityUnitIdList.value = res.data
 | 
					  securityUnitIdList.value = res.data
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
const addService = function (record) {
 | 
					const addService = function (record) {
 | 
				
			||||||
 | 
					  // modal.destroy()
 | 
				
			||||||
  formParams.value.enterprisesUnitId = record.snowFlakeId //企事业单位Id
 | 
					  formParams.value.enterprisesUnitId = record.snowFlakeId //企事业单位Id
 | 
				
			||||||
  visible.value = true
 | 
					  // visible.value = true
 | 
				
			||||||
  //Modal.confirm({
 | 
					  modal = Modal.confirm({
 | 
				
			||||||
  //  title: serviceTitle.value,
 | 
					    title: serviceTitle.value,
 | 
				
			||||||
  //  icon: createVNode('div'),
 | 
					    icon: createVNode('div'),
 | 
				
			||||||
  //  width: 600,
 | 
					    width: 600,
 | 
				
			||||||
  //  centered: true,
 | 
					    centered: true,
 | 
				
			||||||
  //  content: () => <FormProMax ref={formRef} v-model:value={formParams.value} formItemOptions={formItemOptions.value} />,
 | 
					    content: () => <FormProMax ref={formRef} v-model:value={formParams.value} formItemOptions={formItemOptions.value} />,
 | 
				
			||||||
  //  onOk: async () => {
 | 
					    onOk: async () => {
 | 
				
			||||||
  //    await submit()
 | 
					      await submit()
 | 
				
			||||||
  //  },
 | 
					    },
 | 
				
			||||||
  //  onCancel: async () => {
 | 
					    onCancel: async () => {
 | 
				
			||||||
  //    await closeModal()
 | 
					      await closeModal()
 | 
				
			||||||
  //  },
 | 
					    },
 | 
				
			||||||
  //})
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue