column-input.jsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import { h, computed } from 'vue'
  2. import CipFormItem from '../cip-form-item'
  3. export default {
  4. name: 'ColumnInput',
  5. props: {
  6. config: Object,
  7. fieldKey: String,
  8. columnKey: String,
  9. index: Number,
  10. model: Object,
  11. tableDependOnValues: Object,
  12. propertyKey: [String,Number],
  13. tableRuleKey: String,
  14. tableData: Object,
  15. updateData: Function
  16. },
  17. setup (props) {
  18. const computedConfig = computed(() => {
  19. const config = { ...props.config }
  20. config.width = '100%'
  21. config.hideLabel = true
  22. if (config.writable === true) {
  23. config.ruleKey = `${props.tableRuleKey}.${props.propertyKey}.${props.columnKey}`
  24. }
  25. if (!config.writable) {
  26. config.readable = true
  27. if (!config.dynamic) {
  28. config.dependOn = []
  29. }
  30. }
  31. return config
  32. })
  33. const fromItemProps = computed(() => {
  34. let { index, model, columnKey: fieldKey, tableDependOnValues, tableData, updateData } = props
  35. return {
  36. model, // 数据
  37. fieldKey, // 整合tableData对象的键值
  38. tableDependOnValues, // table data依赖数据
  39. tableData, // table的数据
  40. config: computedConfig.value, // 改变后的配置
  41. inTable: true, // 特殊标记
  42. 'onUpdate:model': (val) => { // 更新数据
  43. model = val
  44. updateData(val, index)
  45. }
  46. }
  47. })
  48. return () => h(CipFormItem, fromItemProps.value)
  49. }
  50. }