diantou/src_custom/_form-designer/component-library/xm-solid-radio.vue

<template>
  <div>
    <a-form-model-item>
      <div slot="label">
        选项
        <a-icon
          v-if="component.attrFD.listItemType !== 'dict'"
          type="plus-circle"
          theme="twoTone"
          @click="addItem"
        />
        <a-select
          v-model="component.attrFD.listItemType"
          @change="
            () => {
              if (component.attrFD.listItemType !== 'dict') {
                // 优先看有没有配数据字典，配了数据字典就从数据字典取，没有就从自定义的取
                component.attr.dict = undefined
              }
            }
          "
        >
          <a-select-option value="dict">
            数据字典
          </a-select-option>
          <a-select-option value="custom">
            自定义
          </a-select-option>
        </a-select>
      </div>
      <template v-if="component.attrFD.listItemType !== 'dict'">
        <div v-for="(item, index) in component.attr.selectListItem" :key="index">
          <a-col :span="9"><a-input v-model="item.label" placeholder="名称"/></a-col>
          <a-col :span="9"><a-input v-model="item.value" placeholder="值"/></a-col>
          <a-col :span="6">
            <a-icon type="delete" @click="deleteItem(index)" />
          </a-col>
        </div>
      </template>
      <sd-tree-picker
        v-else
        v-model="component.attr.dict"
        single
        :load-tree-data="loadTreeData"
        :render="renderItem"
        option-label="text"
        :search-tree-data="searchTreeData"
        @change="updateSelectListItem"
      />
    </a-form-model-item>
    <a-form-model-item label="默认值">
      <SdUglySelect
        v-model="component.attr.defaultValue"
        allow-clear
        :options="component.attr.selectListItem"
      />
    </a-form-model-item>
  </div>
</template>

<script>
import SdUglySelect from '@/form-designer/sd-ugly-select.vue'
import { Radio } from 'ant-design-vue'
import axios from '@/common/services/axios-instance'
import components from './_import-components/xm-solid-radio-import'
function getComponentForEdit(component, childrenComponent) {
  return {
    props: ['designerData'],
    render() {
      const defaultValue = this.designerData.attr.defaultValue
      return (
        <component defaultValue={defaultValue} buttonStyle={'solid'}>
          {this.designerData.attr.selectListItem.map((item) => {
            return <childrenComponent value={item.value}>{item.label}</childrenComponent>
          })}
        </component>
      )
    },
  }
}

export const metaInfo = {
  caption: '实底单选框',
  component: getComponentForEdit(Radio.Group, Radio.Button),
  icon: 'sd-square',
  order: 800,
  category: 'basic',
}

export { getComponentForEdit }

export const fieldProps = {
  dataType: 'selectlist',
  attrFD: { listItemType: 'custom' },
  attr: {
    dict: undefined,
    selectListItem: [
      {
        label: '选项1',
        value: '1',
      },
      {
        label: '选项2',
        value: '2',
      },
    ],
  },
}
export default {
  name: 'XmSolidRadio',
  components: { SdUglySelect, ...components },
  data() {
    return {}
  },
  methods: {
    addItem() {
      this.component.attr.selectListItem.push({
        label: '选项',
        value: 'new',
      })
    },
    deleteItem(index) {
      this.component.attr.selectListItem.splice(index, 1)
    },
    loadTreeData(id) {
      // 需求约定的，数据字典从这两类配置参数下面取
      return Promise.all([
        axios.get('api/framework/v1/dict-manager/dictTree?keyId=OA_COMMON&containChildren=true'),
        axios.get('api/framework/v1/dict-manager/dictTree?keyId=GENERAL&containChildren=true'),
      ]).then((res) => {
        const data = [
          {
            id: 'OA_COMMON',
            text: '公用',
            leaf: false,
            props: {},
            children: res[0].data,
          },
          {
            id: 'GENERAL',
            text: '通用审批框架',
            leaf: false,
            props: {},
            children: res[1].data,
          },
        ]
        const f = function(data) {
          if (data?.length) {
            data.forEach((item) => {
              item.isLeaf = item.leaf
              item.checkable = item.leaf
              f(item.children)
            })
          }
        }
        f(data)
        this.treeData = data
        return data
      })
    },
    searchTreeData(text) {
      const result = []
      const f = function(data) {
        if (data?.length) {
          data.forEach((item) => {
            if (item.text.includes(text)) {
              result.push(item)
            }
            f(item.children)
          })
        }
      }
      f(this.treeData)
      return result
    },
    renderItem(item) {
      if (item.props) {
        const label = Object.keys(item.props)
          .map((key) => item.props[key])
          .join('|')
        return <span title={'选项:' + label}>{item.text}</span>
      } else {
        return item.text
      }
    },
    updateSelectListItem([item]) {
      if (item === undefined) {
        this.component.attr.selectListItem = []
        return
      }
      this.component.attr.dict = [{ id: item.id, text: item.text }]
      this.component.attr.selectListItem = []
      if (item.props) {
        Object.keys(item.props).forEach((key) => {
          this.component.attr.selectListItem.push({ label: item.props[key], value: key })
        })
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>