项目实战day4

故心故心故心故心小故冲啊

---

---

1.面包屑

在vue中使用面包屑步骤:
1.在router中meta中定义title
2.使用this.$route.matched 过滤出所有的 item.meta.title

getBreadcrumb() {
      console.log(this.$route.matched);
      this.lists = this.$route.matched.filter(
      item => item.meta && item.meta.title
  );
}

3.create中就使用

 created() {
    this.getBreadcrumb();
  },

4.路由监听

watch: {
    $route() {
      this.getBreadcrumb();
    }
  }

5.template中循环遍历

<el-breadcrumb-item v-for="(item,index) in lists" :key="item.path">
          <!-- span标签最后一个 -->
          <span v-if="index==lists.length-1" >{{ item.meta.title }}</span>
          <!-- 不是最后一个显示 -->
          <router-link :to="item.path" v-else>{{ item.meta.title }}</router-link>
   </el-breadcrumb-item>

2.申请管理的完成

通过el-form / (el-card el-row --布局样式搞好)等等共同完成
需要注意的是

  <el-form-item label="姓名" prop="name">
     <el-input v-model="temp.name" />
 </el-form-item>

这里的lable指的是

输入框需要双向绑定

3.页面展示

 <div class="app-container">
    <!-- 搜索 -->
    <div class="filter-container">
      <el-input
        placeholder="请输入查询内容"
        v-model="listQuery.name"
        clearable
        style="width: 200px;"
        class="filter-item"
        @input="search"  这里每次对输入框进行操作就可以触发search
      ></el-input>
      <el-button type="primary" icon="el-icon-search" class="filter-item" @click="search">搜索</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100" column-key="name"></el-table-column>

      <el-table-column prop="birthday" label="出生日期" width="120" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.birthday | getDate}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="sex" label="性别" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.sex | getSex}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="education" label="教育程度" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.education | getEducation}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="address1" label="居住地址" width="200"></el-table-column>
      <el-table-column prop="mobile_phone" label="手机号" width="120"></el-table-column>

      <el-table-column prop="status" label="申请状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status |getStatusStyle">{{ scope.row.status | getStatus}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="updataDialog(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delDialog(row)">删除</el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleSubmit(row)"
            :disabled="row.status!=0&&row.status!=3&&row.status!=6"
          >提交审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rows"
      ></el-pagination>
    </div>
    <!-- 编辑弹层功能 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form
        ref="updateForm"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="ID" prop="id" v-show="false">
          <el-input v-model="temp.id" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker type="datetime" v-model="temp.birthday" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="temp.sex" class="filter-item" placeholder="Please select">
            <el-option
              v-for="item in sexOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="教育程度" prop="education">
          <el-select v-model="temp.education" class="filter-item" placeholder="Please select">
            <el-option
              v-for="item in educationOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="居住地址" prop="address1">
          <el-input v-model="temp.address1" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile_phone">
          <el-input v-model.number="temp.mobile_phone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="update()">编辑</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>正在执行删除操作</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>

过滤处理(在需要过滤的,可以添加插槽进行过滤)

 filters: {
    //过滤性别
    getSex(data) {
      switch (data) {
        case "man":
          return "男";
        case "woman":
          return "女";
        default:
          return data;
      }
    },
    //过滤教育程度
    getEducation(data) {
      switch (data) {
        case "college":
          return "大学";
        case "highschool":
          return "高中";
        default:
          return data;
      }
    },
    //时过滤间
    getDate(time) {
      var d = new Date(time);
      var times =
        d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
      return times;
    },
    //过滤状态
    getStatus(data) {
      switch (data) {
        case 0:
          return "进件";
        case 1:
          return "提交初审";
        case 2:
          return "初审通过";
        case 3:
          return "初审拒绝";
        case 4:
          return "提交终审";
        case 5:
          return "终审通过";
        case 6:
          return "终审拒绝";
        case 7:
          return "生成合同";
        default:
          return data;
      }
    },
    //过滤状态样式
    getStatusStyle(data) {
      switch (data) {
        case 0:
          return "success";
        case 1:
          return "info";
        case 2:
          return "success";
        case 3:
          return "warning";
        case 4:
          return "info";
        case 5:
          return "success";
        case 6:
          return "warning";
        case 7:
          return "danger";
        default:
          return data;
      }
    }
  },

在处理编辑和删除的时候,需要一个弹框,这时候需要点击触发弹框的时候把row(全部数据)给与data中的temp,使得进行编辑删除的时候可以传参数.