majorfm v1.0.2

注册:

import 'majorfm/lib/form-design.css'
import FormDesign from 'majorfm'
Vue.use(FormDesign)

使用：

<template>
  <div class="form-design-container">
    <el-form :inline="true" class="demo-form-inline design-main">
      <el-form-item label="名称：">
        <el-input v-model="designName" style="width:400px" placeholder="请输入名称进行搜索">
          <el-button slot="append" icon="el-icon-search" @click="handleSelect()"></el-button>
        </el-input>
      </el-form-item>

      <el-form-item style="float:right">
        <el-button type="primary" icon="el-icon-plus" @click="addFormType()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 设计表单表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="120"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="version" label="版本" width="180"></el-table-column>
      <el-table-column prop="type" label="类型" width="180"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="handlePreviewFormDesign(scope.row)" type="primary" icon="el-icon-view" size="mini">预览</el-button>
          <el-button size="mini" @click="handlerEditDesignForm(scope.row)" icon="el-icon-edit-outline">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格分页 -->
    <el-pagination class="design-main" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
    <!-- 表单设计器 -->
    <el-drawer :show-close="true" title="XXX" :visible.sync="showDesign" size="100%" :with-header="false">
      <div class="form-design-contaier">
        <div class="form-design-header">
          <el-button class="design-btn" size="small" icon="el-icon-back" @click="showDesign = false">返回</el-button>
          <el-button v-if="showType === 'LisFormDesign'" type="primary" class="design-btn" size="small" @click="saveDesignData()" icon="el-icon-upload">保存</el-button>
        </div>
        <!-- :style="formDesignStyle" -->
        <div class="form-design">
          <component :is="showType" ref="formDesign" :parse-form-json="previewData" :form-data="formData" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      designName: '', //搜索表单名称
      tableData: [
        {
          name: 'xx管理单据',
          version: '1.0',
          type: '表单',
        },
        {
          name: 'xx管理单据',
          version: '1.1',
          type: '表单',
        },
        {
          name: '部门管理',
          version: '1.0',
          type: '表单',
        },
        {
          name: '单据报销',
          version: '1.0',
          type: '表单',
        },
      ],
      currentPage: 1, //当前分页
      showDesign: false, //表单设计器 抽屉
      showType: 'LisFormDesign', //打开类型
      formDesignStyle: {},
      previewData: {},
      formData: {},
    }
  },
  methods: {
    /**
     * 保存数据
     */
    saveDesignData() {
      const designFormData = this.$refs.formDesign.getDesignFormData()
      console.log(designFormData)
      // 将编辑的内容保存  预览时使用
      this.previewData = {
        fields: designFormData.designFormData,
        ...designFormData.formConf,
      }
      this.formData = designFormData.formData
      this.$message.success('保存成功')
    },
    handleClick() {},
    /**
     * 新增
     */
    addFormType() {
      this.showType = 'LisFormDesign'
      this.showDesign = true
    },
    /**
     * 查询
     */
    handleSelect() {},
    /**
     * 分页size change
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    /**
     * 分页事件
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    /**
     * 表格编辑设计
     */
    handlerEditDesignForm() {
      this.showType = 'LisFormDesign'
      this.showDesign = true
    },
    /**
     * 预览组件
     * 预览时 传入 parseFormJson  以及formData 为表单的值
     * parseFormJson：{fields:获取数据时的designFormData,...formConf }
     */
    handlePreviewFormDesign() {
      this.showDesign = true
      this.showType = 'LisParse'
      // const designFormData = this.$refs.formDesign.getDesignFormData()
      // console.log(designFormData)
      // // 将编辑的内容保存  预览时使用
      // this.previewData = {
      //   fields: designFormData.designFormData,
      //   ...designFormData.formConf
      // }
    },
  },
  created() {
    const bodyZoom = document.body.style.zoom
    this.formDesignStyle = {
      zoom: Math.abs(bodyZoom - 1) + 1,
    }
  },
}
</script>

<style lang="less" scoped>
.form-design-container {
  height: 100%;
  width: 100%;
  ::v-deep .el-drawer__open .el-drawer.rtl {
    background: #ffffff;
  }
  .design-main {
    margin: 15px 0;
  }
  .form-design-contaier {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .form-design-header {
      height: 60px;
      line-height: 60px;
      text-align: right;
      box-sizing: border-box;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
      .design-btn {
        width: 120px;
        margin: 0 20px;
      }
    }
    .form-design {
      height: calc(~'100% - 60px');
      width: 100%;
      padding: 10px 0;
      box-sizing: border-box;
      overflow: auto;
      position: relative;
    }
  }
}
::v-deep .el-drawer__open .el-drawer.rtl,
::v-deep .el-textarea__inner {
  background: #ffffff;
}

::v-deep .el-icon-copy-document {
  &::before {
    font-size: 14px !important;
  }
}
::v-deep .el-textarea__inner {
  color: #000;
}
</style>