【项目四】全局公共组件的封装

card组件

card 需要传入的是title 判断是否有点击按钮

使用
1 在main.js 注册

2 在页面中使用

<zc-card title="用户列表" btnName="创建用户" url="users/create">
    <template #filter>
      <el-input v-model="params.uname">
        <el-button slot="append" icon="el-icon-search" @click="init()">
        </el-button>
      </el-input>
      <el-date-picker
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        v-model="time"
      >
      </el-date-picker>
    </template>
</zc-card>

table组件

封装的意义 el-table 太冗余 在template中太长 el-table-column
是否有自定义列

<template>
  <el-table :data="tableData">
    <template v-for="(item, index) in columns">
      <!-- 自定义数据 -->
      <el-table-column
        :prop="item.field"
        :label="item.title"
        :key="index"
        v-if="item.type"
        :width="item.width"
      >
        <template slot-scope="scope">
          <!-- 内容 -->
          <el-switch
            v-if="item.type === 'switch'"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="item.payload.change(scope.row)"
          >
          </el-switch>
          <template v-if="item.type === 'btn'">
            <el-button
              v-for="(btnItem, btnIndex) in item.payload"
              :key="btnIndex"
              :type="btnItem.type"
              :size="btnItem.size"
              @click="btnItem.click(scope.row)"
            >
              <i :class="btnItem.icon"></i>
              {{ btnItem.name }}
            </el-button>
          </template>
          <!-- 内容 -->
        </template>
      </el-table-column>
      <!-- 自定义数据  -->

      <!-- 默认填充 直接显示原数据 -->
      <el-table-column
        v-else
        :prop="item.field"
        :label="item.title"
        :key="index"
        :width="item.width"
      ></el-table-column>
      <!-- 默认填充 直接显示原数据 -->
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
};
</script>

使用需要传递二个参数

 <zc-table :tableData="tableData" :columns="columns"></zc-table>
      columns: [
        { title: "编号", field: "user_id", width: 200 },
        { title: "所属角色", field: "role_name", width: 100 },
        { title: "用户名", field: "username", width: 100 },
        { title: "手机号", field: "mobile", width: 130 },
        {
          title: "冻结",
          type: "switch",
          payload: {
            open: true,
            close: false,
            change: (row) => console.log(row),
          },
        },
        { title: "更新于", field: "create_time", width: 200 },
        {
          title: "操作",
          width: 300,
          fixed: "right",
          type: "btn",
          payload: [
            {
              name: "修改用户",
              type: "primary",
              size: "mini",
              click: (row) => {
                this.dialogState = true;
              },
            },
            {
              name: "分配角色",
              type: "success",
              size: "mini",
              click: (row) => {
                this.UserAssignRoleState = true;
              },
            },
            {
              name: "删除",
              size: "mini",
              type: "danger",
              click: (row) => {
                this.confirmFn(() => {
                  this.$message.success("等待请求接口");
                });
              },
            },
          ],
        },
      ],

form组件

判断各个类型

<template>
  <el-form :rules="formItem.rules" :model="formData" ref="form">
    <template v-for="(item, i) in formItem">
      <!-- 内容 -->
      <el-form-item
        :label="item.label"
        :prop="item.field"
        :key="i"
        :rules="item.rules"
        :label-width="item.width + 'px'"
      >
        <!-- input -->
        <el-input
          v-if="item.type === 'input'"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          :icon="item.icon"
          v-model="formData[item.field]"
        ></el-input>
        <!-- input -->

        <!-- password -->
        <el-input
          v-if="item.type === 'password'"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          :icon="item.icon"
          v-model="formData[item.field]"
        ></el-input>
        <!-- password -->

        <!-- select -->
        <el-select
          v-if="item.type === 'select'"
          :placeholder="item.placeholder"
          v-model="formData[item.field]"
        >
          <el-option
            v-for="(selectItem, selectIndex) in item.payload"
            :key="selectIndex"
            :label="selectItem.label"
            :value="selectItem.value"
          >
          </el-option>
        </el-select>
        <!-- select -->
      </el-form-item>
      <!-- 内容 -->
    </template>
    <el-form-item :key="index">
      <template v-for="(btnItem, btnIndex) in formBtns">
        <el-button
          v-if="formBtns"
          :key="btnIndex"
          :type="btnItem.type"
          @click="submitFn(btnItem.content, btnItem.click)"
        >
          {{ btnItem.content }}
        </el-button>
      </template>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      index: "",
    };
  },
  props: {
    formItem: {
      type: Array,
      required: true,
    },
    formBtns: {
      type: Array,
    },
  },
  methods: {
    submitFn(content, callback) {
      if (content == "重置") {
        this.$refs.form.resetFields();
      }
      this.$refs.form.validate((isSuccuss) => {
        callback(this.formData);
      });
    },
  },
};
</script>

使用

 <zc-form :width="80" :formItem="formItem" :formBtns="formBtns"></zc-form>

 formItem: [
     {
       label: "手机号",
       width: 100,
       rules: [
         { required: true, message: "请输入手机号", trigger: "blur" },
         {
           validator: iphoneRules,
           trigger: "blur",
         },
       ],
       field: "mobile",
       placeholder: "请输入👋🐔号",
       type: "input",
     },
     {
       label: "用户名",
       width: 100,
       rules: [
         { required: true, message: "用户名必须", trigger: "blur" },
         { min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
       ],
       field: "username",
       placeholder: "请输入用户名",
       type: "input",
     },
     {
       label: "密码",
       width: 100,
       rules: [
         { required: true, message: "密码必须", trigger: "blur" },
         { min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
       ],
       field: "password",
       placeholder: "请输入密码",
       type: "password",
     },
     {
       label: "请选择密保问题",
       width: 200,
       field: "question",
       rules: [
         { required: true, message: "请选择密保问题", trigger: "change" },
       ],

       disabled: true,
       placeholder: "请输入密保问题",
       type: "select",
       payload: [
         { label: "你大爷名字", value: "你大爷名字" },
         { label: "您其中唯一讲师的名字", value: "您其中唯一讲师的名字" },
         { label: "你初念的名字", value: "你初念的名字" },
       ],
     },
     {
       label: "密保答案",
       field: "answer",
       placeholder: "请输入密保答案",
       width: 100,
       type: "input",
       rules: [
         { required: true, message: "请输入密保答案", trigger: "blur" },
         { min: 3, max: 8, message: "至少3~8个字符", trigger: "blur" },
       ],
     },
   ],
   formBtns: [
     {
       content: "创建",
       type: "primary",
       click: async (formData) => {
         console.log("表单数据", formData);
         let res = await postUsersApi(formData);
         if (res.meta.state === 201) {
           this.$message.success(res.meta.msg);
           this.jumpFn("/users");
         } else {
           this.$message.error(res.meta.msg);
         }
       },
     },
     {
       content: "重置",
       type: "warning",
     },
   ],