rongxin.dashboard/src/components/form/FieldRadio.vue

<!-- 单选框组表单组件 zhao -->
<template>
  <div>
    <van-field
      :readonly="true"
      :name="name"
      :label="label"
      :placeholder="placeholder"
      input-align="right"
      :required="required"
      :label-width="labelWidth || 'auto'"
    >
      <template #right-icon>
        <van-radio-group :disabled="readonly" @change="onChanged" v-model="internalValue" direction="horizontal" :rules="rules">
          <van-radio v-for="(item, index) in (columns ? columns : remoteColumns)" :name="getValue(item)" :key="index">{{getLabel(item)}}</van-radio>
        </van-radio-group>
      </template>
    </van-field>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "fieldRadio",
  props: [
    'name', 'readonly', 'value', 'label', 'placeholder', 'required', 'rules', 'labelWidth',
    'columns', // 列表数据 Array
    'valueKey', // 名称键名 String
    'dataKey', // 值键名 String
    'remoteUrl', // 远程列表加载地址 String
    'onRemoteResponse', // 远程获取到结果的处理回调 String|Function 如果是函数需返回数组, 如果是字符串支持.分割
  ],
  watch: {
    value: function (newVal, oldVal) {
      this.internalValue = newVal;
    },
    columns: function (newVal, oldVal) {
    },
    remoteUrl: function (newVal, oldVal) {
      this.requestRemote();
    },
    onRemoteResponse: function (newVal, oldVal) {
      this.parseRemote();
    }
  },
  created() {
    if(this.remoteUrl)
      this.requestRemote();
  },
  data() {
    return {
      internalValue: this.value,
      remoteColumns: null,
      remoteResponse: null,
    };
  },
  methods: {
    onChanged(data) {
      this.$emit("input", this.internalValue);
      this.$emit('change', this.internalValue);
    },
    getValue(data) {
      return typeof(data) === 'object' && this.dataKey ? data[this.dataKey] : data;
    },
    getLabel(data) {
      return typeof(data) === 'object' && this.valueKey ? data[this.valueKey] : data;
    },
    getColumns() {
      return this.columns ? this.columns : this.remoteColumns;
    },
    requestRemote() {
      if(!this.remoteUrl)
        return;
      this.remoteColumns = [];
      let promise = typeof(this.remoteUrl) === 'function' ? this.remoteUrl() : (this.remoteUrl instanceof Promise ? this.remoteUrl : request(this.remoteUrl));
      promise.then((resp) => {
        this.remoteResponse = resp;
        this.parseRemote();
      }).catch((e) => {
        console.error(e);
      }).finally(() => {
      })
    },
    parseRemote() {
      if(!this.remoteResponse)
        return;
      let type = typeof(this.onRemoteResponse);
      if(type === 'function')
        this.remoteColumns = this.onRemoteResponse(this.remoteResponse);
      else if(type === 'string')
      {
        let arr = this.onRemoteResponse.split('.');
        let ptr = this.remoteResponse;
        for(let i in arr)
        {
          ptr = this.remoteResponse[arr[i]];
        }
        this.remoteColumns = ptr;
      }
      else
        this.remoteColumns = this.remoteResponse;
    },
  },
}
</script>

<style scoped>

</style>