import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import vueGycUi from "vue-gyc-ui";
Vue.use(ElementUI, { size: "medium" }).use(vueGycUi);

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      currdata: [],
      showCommitBtn: true,
      formInfo: undefined,
      isshow: undefined,
      formAttrs: [
        {
          key: "name",
          title: "姓名",
          val: "刘二麻子",
          required: true,
          width: 210,
          validate: (rule, value, callback) => {
            if (value === "fail") {
              callback(new Error("测试错误！"));
            } else {
              callback();
            }
          },
        },
        { key: "age", title: "年龄", val: "18", number: true, width: 210 },
        { key: "company", title: "公司", val: "", max: 10, width: 210 },
        {
          key: "sex",
          title: "性别",
          val: "0",
          dicts: [
            { label: "男", value: "1" },
            { label: "女", value: "0" },
          ],
          query: (words, callback) => {
            callback(
              [
                { label: "男", value: "1" },
                { label: "女", value: "0" },
              ].filter((li) => li.label == words)
            );
          },
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "date",
          title: "日期",
          val: "",
          date: true,
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "time",
          title: "时间",
          val: "",
          time: true,
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "leval",
          title: "等级",
          val: 3,
          radio: [1, 2, 3],
          labels: ["大", "中", "小"],
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "hobby",
          title: "爱好",
          val: [10],
          checkbox: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          labels: [
            "乒乓球",
            "跑步",
            "吃鱼",
            "打球",
            "开车",
            "看书",
            "打游戏",
            "上网",
            "cosplay",
            "movie",
          ],
          width: 650,
          change: (data) => {
            console.log(data);
          },
        },
        { key: "remark", title: "备注", val: "", area: true, width: 650 },
        {
          key: "email",
          title: "邮箱",
          val: "myemail@qq.com",
          email: true,
          required: true,
          width: 650,
        },
        {
          key: "switch",
          title: "开关",
          switch: true,
          val: false,
          trueColor: "yellow",
          falseColor: "blue",
          switchWidth: 100,
          change: (data) => {
            console.log(data);
          },
        },
      ],
      tdata: [
        {
          key: "goodstags",
          title: "goodstags",
          val: "",
          col_width: 150,
          suffix: true, // "el-icon-edit",
          prefix: "$",
          password: false,
          click: (data) => {
            alert("hello world!");
          },
        },
        {
          key: "amount",
          title: "amount",
          val: 0,
          number: true,
          prefix: "￥",
          suffix: "<B style='color:red;'>元</B>",
          click: (data) => {
            //todo()
          },
          change: (data) => {
            console.log(data);
          },
        },
        { key: "wareid", title: "wareid", val: 0, number: true },
        {
          key: "arrgoodstags",
          title: "arrgoodstags",
          val: ["", "", ""],
        },
        { key: "goodsid", title: "goodsid", val: 0, number: true },
        {
          key: "retailsale",
          title: "retailsale",
          val: 0,
          number: true,
          col_width: 120,
        },
        { key: "fl1", title: "fl1", val: 1 },
        {
          key: "goodsname",
          title: "goodsname",
          val: "",
          tooltip: true,
          col_width: 200,
        },

        { key: "fl2", title: "fl2", val: 0 },
        { key: "imgurl", title: "imgurl", val: "mall/00ef4g", tooltip: true },
        { key: "sale", title: "sale", val: 865.0, number: true },
        {
          key: "amountxs",
          title: "amountxs",
          val: 0.0,
          number: true,
          col_width: 120,
        },
        { key: "statetag", title: "statetag", val: 1, tooltip: true },
        { key: "jbstr", title: "jbstr", val: "" },
        {
          key: "remark",
          title: "remark",
          val: "Thermo King 。",
          tooltip: true,
          area: true,
          width: 650,
        },
      ],
    };
  },
  methods: {
    //测试表单
    test() {
      this.currdata = this.formAttrs;
      this.formInfo = undefined;
      this.isshow = "g-add-form";
    },
    //初始数据
    async load(a, b) {
      let url = "http://api.lengyun.co:18070/erp/mallvisitor/goodslist.do";
      let data = await axios.post(url, {
        page: a.page,
        pagesize: a.pagesize,
        fieldlist: "*",
        fl1: 2,
        orderlist: "orderid asc",
      });
      b(data.data.data.list, data.data.data.total);
    },
    //增加
    add() {
      this.currdata = this.tdata;
      this.showCommitBtn = true;
      this.formInfo = undefined;
      this.isshow = "g-add-form";
    },
    //删除
    del(data, callback) {
      alert("ok");
      callback(true);
      //callback("删除失败了");
    },
    //编辑
    edit(data) {
      this.currdata = this.tdata;
      this.showCommitBtn = true;
      this.formInfo = data;
      this.isshow = "g-add-form";
    },
    //查看详情
    read(data) {
      this.currdata = this.tdata;
      this.showCommitBtn = false;
      this.formInfo = data;
      this.isshow = "g-add-form";
    },
    //保存数据
    saveData(data) {
      console.log(data);
      this.isshow = undefined;
    },
  },
};
</script>

formAttrs: [
  {
    key: "name",
    title: "姓名",
    val: "",
    required: true, //必填
    //自定义验证
    validate: (rule, value, callback) => {
      if (value === "fail") {
        callback(new Error("测试错误！"));
      } else {
        callback();
      }
    },
  },
  { key: "age", title: "年龄", val: "18", number: true }, //数字
  { key: "company", title: "公司", val: "", max: 10 }, //最大长度
  {
    key: "url",
    title: "日期",
    val: "",
    date: true, //日期
    width: 650,
  },
];