页面赋值22

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>主方列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form-item>
      <!-- <el-button
        type="success"
        v-show="mod"
        icon="el-icon-plus"
        style="float:left;"
        @click="$router.push('/mainlist/addmain')"
        plain
      >添加主方</el-button>
      <div style="float:right">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="searchinput"
          style="width:300px"
        ></el-input>
        <el-button type="success" @click="search">搜索</el-button>
      </div>-->
      <div class="add_search clearfix">
        <el-button
          type="success"
          v-show="mod"
          icon="el-icon-plus"
          style="float:left;margin:14px 0 0 10px"
          @click="$router.push('/mainlist/addmain')"
          plain
        >添加主方</el-button>
        <el-form style="float:right;" :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="主方编码">
            <el-input
              placeholder="请输入主方编码"
              prefix-icon="el-icon-search"
              style="width: 200px"
              v-model="searchCode"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchStatus" placeholder="请选择">
              <el-option label="正常" value="1"></el-option>
              <el-option label="失效" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主方名称">
            <el-input
              placeholder="请输入主方名称"
              prefix-icon="el-icon-search"
              style="width: 200px"
              v-model="searchName"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-form-item>

    <div style="background:#fff">
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column prop="main_code" label="主方编码" header-align="center" sortable></el-table-column>
        <el-table-column prop="main_name" label="主方名称" header-align="center"></el-table-column>
        <el-table-column prop="main_content" label="主方内容" header-align="center"></el-table-column>
        <el-table-column prop="disease_name" label="关联次症名称" header-align="center"></el-table-column>
        <el-table-column prop="main_status" label="状态" header-align="center">
          <template v-slot="scope">
            <el-switch
              v-model="scope.row.main_status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" header-align="center" sortable></el-table-column>
        <el-table-column label="操作" header-align="center">
          <template v-slot="scope">
            <el-button
              size="small"
              v-show="mod"
              type="primary"
              icon="el-icon-edit"
              @click="$router.push('/mainlist/'+scope.row.main_id)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPages"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { onMounted } from "@vue/runtime-core";
import { getCurrentInstance } from "vue";
import { mainlist, mainsearch } from "@/api/axiosApi";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    onMounted(() => {
      proxy.$test("/main/set/ajax");
    });
  },
  data() {
    return {
      mod: true,
      // del: true,
      searchCode: "",
      searchStatus: "",
      searchName: "",
      form: {
        main_code: "",
        main_name: "",
        main_content: "",
        disease_name: "",
        main_status: ""
      },
      tableData: [],
      currentPage: 1,
      totalPages: "",
      pageSize: 10
    };
  },
  methods: {
    // 搜索
    search() {
      mainsearch({
        page: this.currentPage,
        pagesize: this.pageSize,
        main_code: this.searchCode,
        main_name: this.searchName,
        main_status: this.searchStatus
      })
        .then(res => {
          console.log(res.data.datas);
          var arr = res.data.datas.data;
          arr.forEach((item, index) => {
            switch (item.main_status) {
              case 1:
                item.main_status = true;
                break;
              case 2:
                item.main_status = false;
                break;
              default:
                break;
            }
            var key = [];
            Object.keys(item.main_content).forEach(val => {
              // console.log(val);
              // console.log(item.main_content[val]);
              key.push(val);
            });
            item.main_content = key.toString();
          });
          this.tableData = arr;
          this.totalPages = res.data.datas.total;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 每页显示条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.handleCurrentChange();
    },
    // 获取分页数据
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      if (val != undefined) this.currentPage = val;

      if (this.searchCode || this.searchName || this.searchStatus) {
        this.search();
      } else {
        mainlist({ page: this.currentPage, pagesize: this.pageSize })
          .then(res => {
            // console.log(res.data.datas);
            var arr = res.data.datas.data;
            arr.forEach((item, index) => {
              switch (item.main_status) {
                case 1:
                  item.main_status = true;
                  break;
                case 2:
                  item.main_status = false;
                  break;
                default:
                  break;
              }
              var key = [];
              Object.keys(item.main_content).forEach(val => {
                // console.log(val);
                // console.log(item.main_content[val]);
                key.push(val);
              });
              item.main_content = key.toString();
            });
            this.tableData = arr;
            this.totalPages = res.data.datas.total;
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  },
  mounted() {
    this.handleCurrentChange();
    this.mod = JSON.parse(sessionStorage.getItem("mod")); //修改
    // this.del = JSON.parse(sessionStorage.getItem("del")); //删除
  }
};
</script>

<style>
.el-table .cell {
  text-align: center;
}
.el-input {
  width: 30%;
}
.add_search {
  background-color: #fff;
}
.el-select .el-input {
  width: 150px;
}
</style>