smart-hub-form

smartHub 表单公共组件用于元素渲染与后台设置效果的预览

本地项目初始化

yarn install

查看例子

yarn dev

组件打包

yarn run lib

基于 elementui，使用响应式处理元素 PC、手机样式

本地开发调试

本地项目 执行组件打包命令

yarn run lib

开启文件链接

yarn link

本地项目环境安装本组件

项目链接引用

yarn link @south-rd/smarthub-form

引入组件

import smarthubWidgets from '@south-rd/smarthub-form'
import '@south-rd/smarthub-form/lib/smarthub-form.css'
Vue.use(smarthubWidgets)

使用组件

组件名称

 <smarthub-form
      :isPreview="false"
      :formData="mock"
      :getMessageCode="getMessageCode"
      :getStoreList="getStoreList"
      :getShopperList="getShopperList"
      :onChange="onChange"
      @submit="formSubmit"
    ></smarthub-form>

参数

formData：表单数据
isPreview：是否为预览状态
export default {
  name: "App",
  data() {
    return {
      mock: mock,
    };
  },
  methods: {
    onChange(formInfos,index) {//表单改变时触发
      console.log(formInfos,index);
    },
    getMessageCode(params, cb) {
      cb("res");
      if (params) {
        return;
      }
      commonApi
        .post("/api/apps/sms/obtailSmsCode", {
          ...params,
        })
        .then((res) => {
          cb(res);
        });
    },
    getStoreList(cb) {
      //门店
      commonApi.get("/api/apps/storeAndShopper/getStoreList").then((res) => {
        cb(res);
      });
    },
    getShopperList(storeId, cb) {
      //导购
      commonApi
        .post("/api/apps/storeAndShopper/getShopperList", {
          storeId,
        })
        .then((res) => {
          cb(res);
        });
    },
    formSubmit(submitDatas) {
      let content = {};
      submitDatas.list.forEach((i) => {
        let val = i.value;
        if (i.value instanceof Date) {
          val =
            i.type == "time"
              ? new Date(i.value).Format("hh:mm:ss")
              : new Date(i.value).Format("yyyy-MM-dd");
        } else if (i.value instanceof Array) {
          val = i.value.join(",");
        } else if (!i.value) {
          val = "";
        }
        content[`${i.text}`] = val.trim();
      });
      debugger;
      console.log(content);
    },
  },
};
</script>