diantou/src_custom/_form-designer/component-library/xm-select-law-action.vue

<script>
/* eslint-disable */
// sd-skip-auto-import
import SdDraggable from '@/common/components/sd-draggable.vue'
import SdPlaceholderEditor from '@/form-designer/sd-placeholder-editor.vue'
import SdTreePicker from '@/common/components/sd-tree-picker.vue'
import SdUglySelect from '@/form-designer/sd-ugly-select.vue'
import SdRangeInput from '@/form-designer/sd-range-input.vue'
import { Input } from 'ant-design-vue'
import axios from '@/common/services/axios-instance'
import components from './_import-components/xm-select-law-action-import'
export const metaInfo = {
  caption: '案件选择案由',
  component: 'a-input',
  icon: 'sd-list',
  order: 400,
}
export const fieldProps = {
  dataType: 'string',
  attrFD: {
    dict: void 0,
    multiple: 'true',
    selectListItem: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
    ],
    listItemType: 'appDict',
    formItemProps: {
      inputProps: {
        selectValue: '',
        treeName: '',
      },
    },
  },
  attr: {},
}
var _render = function t() {
  var e = this,
    a = e._self._c
  return a(
    'div',
    [
      a(
        'a-form-model-item',
        [
          a(
            'div',
            { attrs: { slot: 'label' }, slot: 'label' },
            [
              e._v(' 选项 '),
              a(
                'a-select',
                {
                  on: {
                    change: () => {
                      e.component.attrFD.dict = void 0
                      e.component.attrFD.appDict = void 0
                    },
                  },
                  model: {
                    value: e.component.attrFD.listItemType,
                    callback: function(t) {
                      e.$set(e.component.attrFD, 'listItemType', t)
                    },
                    expression: 'component.attrFD.listItemType',
                  },
                },
                [
                  a('a-select-option', { attrs: { value: 'dict' } }, [e._v(' 数据字典 ')]),
                  a('a-select-option', { attrs: { value: 'appDict' } }, [e._v(' 本应用数据字典 ')]),
                ],
                1
              ),
            ],
            1
          ),
          a('sd-tree-picker', {
            attrs: {
              value: [...(e.component.attrFD.dict || []), ...(e.component.attrFD.appDict || [])],
              single: '',
              'load-tree-data': e.loadTreeData,
              render: e.renderItem,
              'option-label': 'text',
              'search-tree-data':
                'dict' === e.component.attrFD.listItemType ? e.searchTreeData : void 0,
            },
            on: { change: e.updateSelectListItem },
          }),
        ],
        2
      ),
      a(
        'a-form-model-item',
        { attrs: { label: '选择机构树的值' } },
        [
          a('sd-ugly-select', {
            attrs: {
              'allow-clear': '',
              mode: 'true' === e.component.attrFD.multiple ? 'multiple' : void 0,
              options: e.component.attrFD.selectListItem,
            },
            model: {
              value: e.component.attrFD.formItemProps.inputProps.selectValue,
              callback: function(t) {
                e.$set(e.component.attrFD.formItemProps.inputProps, 'selectValue', t)
              },
            },
          }),
        ],
        1
      ),
      a(
        'a-form-model-item',
        { attrs: { label: '案由树名称' } },
        [
          a('a-input', {
            model: {
              value: e.component.attrFD.formItemProps.inputProps.treeName,
              callback: function(t) {
                e.$set(e.component.attrFD.formItemProps.inputProps, 'treeName', t)
              },
            },
          }),
        ],
        1
      ),
      !e.component.readonly
        ? a(
            'a-form-model-item',
            { attrs: { label: '字符长度范围' } },
            [
              a('sd-range-input', {
                attrs: {
                  max: e.component.attr.maxLength,
                  min: e.component.attr.minLength,
                  'disable-negative': '',
                  'max-max': 2e3,
                },
                on: {
                  'update:max': function(t) {
                    return e.$set(e.component.attr, 'maxLength', t)
                  },
                  'update:min': function(t) {
                    return e.$set(e.component.attr, 'minLength', t)
                  },
                },
              }),
            ],
            1
          )
        : e._e(),
      !e.hideMultipleOption
        ? a('sd-placeholder-editor', { attrs: { component: e.component } })
        : e._e(),
    ],
    1
  )
}
var staticRenderFns = []
_render._withStripped = true
export default {
  name: 'XmSelectLawUser',
  components: {
    SdDraggable,
    SdPlaceholderEditor,
    SdTreePicker,
    SdUglySelect,
    SdRangeInput,
    ...components,
  },
  props: { hideMultipleOption: { type: Boolean, default: false } },
  data() {
    return {}
  },
  created() {
    this.component.attrFD.listItemType = this.component.attrFD.listItemType || 'custom'
  },
  methods: {
    loadTreeData(t = -1) {
      let e
      if ('appDict' === this.component.attrFD.listItemType)
        e = axios
          .get('api/framework/v1/app-dict/tree-sub/' + this.$route.query.appId + '?parentId=' + t)
          .then((t) => t.data)
      else
        e = 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((t) => {
          const e = [
            { id: 'OA_COMMON', text: '公用', leaf: false, props: {}, children: t[0].data },
            { id: 'GENERAL', text: '通用审批框架', leaf: false, props: {}, children: t[1].data },
          ]
          return e
        })
      return e.then((t) => {
        const e = function(t) {
          if (t?.length)
            t.forEach((t) => {
              t.isLeaf = t.leaf
              t.checkable = t.leaf
              e(t.children)
            })
        }
        e(t)
        this.treeData = t
        return t
      })
    },
    searchTreeData(t) {
      const e = []
      const a = function(o) {
        if (o?.length)
          o.forEach((o) => {
            if (o.text.includes(t)) e.push(o)
            a(o.children)
          })
      }
      a(this.treeData)
      return e
    },
    renderItem(t) {
      const e = this.$createElement
      console.log('render', t)
      if (t.props) {
        const a = Object.keys(t.props)
          .map((e) => t.props[e])
          .join('|')
        return e('span', { attrs: { title: '选项:' + a } }, [t.text])
      } else return t.text
    },
    updateSelectListItem([t]) {
      console.log(this.component)
      this.component.attrFD.selectListItem = []
      this.component.attrFD.dict = []
      this.component.attrFD.appDict = []
      if (void 0 === t) return
      console.log(this.component.attrFD.listItemType)
      if ('dict' === this.component.attrFD.listItemType)
        this.component.attrFD.dict = [{ id: t.id, text: t.text }]
      else this.component.attrFD.appDict = [{ id: t.id, text: t.text }]
      console.log([...(this.component.attrFD.dict || []), ...(this.component.attrFD.appDict || [])])
      console.log('update', t.props)
      if (t.props)
        Object.keys(t.props).forEach((e) => {
          this.component.attrFD.selectListItem.push({ label: t.props[e], value: e })
        })
    },
    multipleModeChange(t) {
      if ('false' === t && this.component.attr.defaultValue?.includes(','))
        this.component.attr.defaultValue = void 0
    },
  },
  render: _render,
  staticRenderFns: staticRenderFns,
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.row {
  display: flex;
  align-items: center;
  :global(.handle) {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 15px;
  }
  /* stylelint-disable-next-line */
  :global(.handle_sd-draggable_common::before) {
    position: absolute;
    /* stylelint-disable-next-line */
    color: #999;
    content: '\22EE\22EE';
  }
}
</style>