mineadmin / mineadmin-vue Goto Github PK

    {
        title: '发布者',
        dataIndex: 'user_id',
        formType: 'select',
        dict: {
            // 远程通用接口请求，新版代码生成都有一个 remote 接口
            remote: 'system/user/remote',
            // 指定组件接收的props
            props: { label: 'username', value: 'id' },
            // 开启分页
            openPage: true,
            // 远程请求配置项
            remoteOption: {
                // 按用户名排序
                sort: { username: 'desc' }, // 如果不指定排序方式，默认为正序排序
                // 设置查询的字段
                select: [ 'id', 'username' ],
                // 设置数据过滤
                filter: {
                    // 查找 id 大于 2 的数据
                    id: [ '>', 2],
                    // 并且用户名包含字母 a 的用户
                    username: [ 'like', 'a' ]
                },
                // 关联模型
                relations: [
                    // 定义关联，关联该用户的登录日志信息
                    {
                        name: 'loginLog', // 关联名
                        model: 'App.System.Model.LoginLog', // 关联模型的命名空间，使用 . 代替 \，可咨询后端人员
                        type: 'hasMany', // 关联类型，hasOne：一对一，hasMany：一对多，belongsTo：一对多（反向），belongsToMany：多对多
                        foreignKey: 'username', // 日志表关联键
                        localKey: 'username',   // 本表外键
                    },
                    // 其他关联....其他可查看 MapperTiart.php 的源代码自行参考
                ]
            }
        }
    },

const columns = reactive([
  {
    title: "序号",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入序号"
    }
  },
  {
    title: "数字",
    dataIndex: "n",
    formType: "input-number",
    search: true,
    commonRules: {
      required: true,
      message: "请输入数字"
    }
  },
]};

  {
    title: "订单状态",
    dataIndex: "order_status",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请输入订单状态"
    },
    dict: {
      name: "order_status",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    }
  }

2 : 已支付

<template>
  <div class="ma-content-block p-3 mt-3">
    <ma-chart height="420px"  :option="chartOptions" />
  </div>
</template>
<script setup>
import {  reactive   } from "vue"

const chartOptions = reactive({
  height:'320px',
  legend: {
    selected: {'收益': true}
  },
  tooltip: {
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'line' // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
      if (params.componentType == 'series') {
        let date = new Date(params.value[0] * 1000);
        let tip = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        let i = params.seriesIndex + 1;
        return tip + '<br/>' + params.seriesName + ":" + params.value[i];
      }
    }
  },
  dataset: [
    {
      source: [
        ['时间', '收益'],
        [1676476800, '-2.43'],
        [1676563200, '-4.35']
      ]
    },
  ],
  xAxis: {
    type: "category",
    axisLabel: {
      formatter: function (val, index) {
        let date = new Date(val * 1000);
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      }
    }
  },
  yAxis: {},
  series: [
    {type: 'line'},
  ],
  dataZoom: [
    {type: 'slider', start: 0, end: 100}
  ],
  grid: {
    x: 60, y: 60, x2: 60, y2: 60,
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 1,
    borderColor: '#ccc'
  },
})
</script>

  {
    title: "数字",
    dataIndex: "n",
    formType: "input-number",
    search: false,                      //  如果设置为搜索，则载入页面时，提示 预期外的错误
    commonRules: {
      required: true,
      message: "请输入数字"
    }
  },

const beforeEdit = (formData) => {
    crudRef.value.crudFormRef.form.account_owner_id = crudRef.value.crudFormRef.form.account_owner_id_helper[0].toString();
    return formData;
}

<template>
        <ma-form  ref="formRef" v-model="form"    v-model:columns="form_columns">
        </ma-form>
</template>
<script setup>
import {ref, reactive, nextTick, onMounted} from 'vue'

const formRef=ref() 

const form = ref({
  name: 'test',
  config: {
    mode: 1,
    price: 88
  }
})

const form_columns = ref([
  {
    "title": "名称",
    "formType": "input",
    "dataIndex": "name",
    "rules": [{"message": "请输入", "required": true}],
  }, {
    "rules": [{"message": "请选择动态调参", "required": true}],
    "title": "动态调参",
    "tooltip": "开启后会根据结果自动调整",
    "formType": "switch",
    "dataIndex": "config.mode",
    "checkedValue": 1,
    "uncheckedValue": 0
  }, {
    "title": "价格",
    "tooltip": "价格系数",
    "formType": "inputNumber",
    "dataIndex": "config.price",
    "rules": [{"message": "请输入价格", "required": true}],
  }
])

watch(
  () => props.modelValue,
  vl => {
    form.value = vl
    console.log('set form.value',vl) //增加日志
  },
  { immediate: true, deep: true }
)
watch(
  () => form.value,
  vl => {
    interactiveControl(vl, flatteningColumns.value)
    console.log('update:modelValue',vl) ////增加日志
    emit('update:modelValue', vl)
  },
  { deep: true }
)

onMounted(() => {
  form.value['config.mode']=1;
  form.value['config.price']=88;
})

eleadmin风格如下：