前端示例-开发-表单

1. 模板结构规范

• 使用 通用布局类

  <template>
    <el-dialog
      :title="!dataForm.ID ? '新增' : isDetail ? '详情' : '编辑'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="JNPF-dialog JNPF-dialog_center"
      lock-scroll
      :modal-append-to-body="false"
      width="72%"
    >
      <el-row class="page-root-row">
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          label-width="120px"
          label-position="right"
          class="JPW-form"
        >
          <el-collapse v-model="activeNames" @change="onCollapseChange">
            <el-collapse-item title="基本信息" name="baseInfo">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="名称" prop="NAME">
                    <el-input v-model="dataForm.NAME" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="链接类型" prop="LINKTYPE">
                    <JPW-select
                      v-model="dataForm.LINKTYPE"
                      :multiple="false"
                      :optionsList="enums.LinkType"
                      clearable
                    ></JPW-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="阶段" prop="PHASECODE">
                    <JPW-checkbox
                      v-model="dataForm.PHASECODE"
                      :optionsList="enums.Phase"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="链接地址" prop="URL">
                    <el-input v-model="dataForm.URL" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="排序" prop="SORTCODE">
                    <el-input-number
                      v-model="dataForm.SORTCODE"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="相关部门" prop="DEPT">
                    <dep-select
                      v-model="dataForm.DEPT"
                      placeholder=""
                      :labelText="dataForm.DEPTNAME"
                      :returnParams="{ DEPTNAME: 'fullName', DEPT: 'id' }"
                      @customParamsChange="selectChange(...arguments)"
                      :style="{ width: '100%' }"
                    ></dep-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="相关人员" prop="OTHERUSER">
                    <user-select
                      v-model="dataForm.OTHERUSER"
                      :labelText="dataForm.OTHERUSERNAME"
                      :returnParams="{ OTHERUSERNAME: 'fullName', USER: 'id' }"
                      placeholder=""
                      @customParamsChange="selectChange(...arguments)"
                    ></user-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="dataForm.REMARK"
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 4 }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </template>

2. 数据管理规范

• data 中定义数据结构:

  import formMixin from "@/mixins/basics/form.js"; // 引入表单混入
  
  export default {
    mixins: [formMixin],
    data() {
      return {
        title: "友情链接", // 表单标题
        list: [], // 表格数据
        apiUrl: "", // 接口地址,指向后端接口地址，举例officeAuto/infoRelease/FriendLink
        enumCode: "Phase,LinkType", // 枚举类型，举例Phase,LinkType
        dataForm: { // 表单数据
          NAME: "",
          LINKTYPE: "",
          URL: "",
          ICON: "",
          SORTCODE: "",
          DEPT: "",
          OTHERUSER: "",
          REMARK: "",
        },
        rules: {
          // 表单验证规则
          NAME: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        },
        activeNames: ["baseInfo"], // 表单折叠面板
      };
    },
  };