Merge branch 'master' of http://192.168.110.209:9001/r/lims-before

Fixiaobai

2023-08-22 e7bc43d27d15379200f59719ef9e525b5d8d6567

Merge branch 'master' of http://192.168.110.209:9001/r/lims-before

 .env.development

@@ -2,4 +2,4 @@
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://localhost:1234/'
VUE_APP_BASE_API = 'http://192.168.110.87:1234/'

 .env.staging

@@ -5,6 +5,6 @@

# base api
# VUE_APP_BASE_API = '/stage-api'
VUE_APP_BASE_API = 'http://192.168.110.254:1234/'
VUE_APP_BASE_API = 'http://192.168.110.87:1234/'



 src/api/basicData/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,75 @@
import request from '@/utils/request'

const Api = {
    addStandardProjectGroup: "/productModel/selectfather", // æ·»åŠ æ ‡å‡†-->选择项目分组
    productModelSelectmater: "/productModel/selectmater", // é€‰æ‹©æ ·å“åç§°
    addproductModel: "/productModel/addproductModel", // æ·»åŠ æ ‡å‡†
    selectproductModel: "/productModel/selectproductModel", // æŸ¥è¯¢æ ‡å‡†æ¨¡ç‰ˆåˆ—表
    deleteProductModel: "/productModel/delproductModel", // åˆ é™¤æ ‡å‡†æ¨¡ç‰ˆ
    selectproductModelById: "/productModel/selectproductModelById", // æ ¹æ®id查询
    updateProductModel: "/productModel/writeproductModel", // æ›´æ–°æ ‡å‡† -->编辑
    deleteList: "/productModel/delAllproductModel", // æ‰¹é‡åˆ é™¤

}

export function addStandardProjectGroupApi() {
    return request({
        url: Api.addStandardProjectGroup,
        method: 'get'
    })
}

export function productModelSelectmaterApi() {
    return request({
        url: Api.productModelSelectmater,
        method: "get"
    })
}

export function addproductModelApi(formData) {
    return request({
        url: Api.addproductModel,
        method: 'post',
        data: formData
    })
}

export function updateProductModelApi(formData) {
    return request({
        url: Api.updateProductModel + '?id=' + formData.id,
        method: 'post',
        data:  formData
    })
}

export function selectproductModelApi(params) {
    return request({
        url: Api.selectproductModel,
        method: "get",
        params: params
    })
}

export function deleteProductModelApi(id){
    return request({
        url: Api.deleteProductModel,
        method: "post",
        params: {id: id}
    })
}

export function selectproductModelByIdApi(id){
    return request({
        url: Api.selectproductModelById,
        method: "get",
        params: {id: id}
    })
}

export function deleteListApi(id){
    return request({
        url: Api.deleteList,
        method: "post",
        params:{ids: id.toString()}
    })
}

 src/api/home.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,37 @@
import request from '@/utils/request'

//获取已检验top3
export function getVerifiedTop3(params) {
    return request({
      url: '/home/checktop3',
      method: 'get',
      params
    })
}

//获取未检验top4
export function getUncheckedTop4(params) {
    return request({
      url: '/home/unchecktop4',
      method: 'get',
      params
    })
}

//获取原材料与成品合格率
export function getMatAndFinshQualified(params) {
    return request({
      url: '/home/qualified',
      method: 'get',
      params
    })
}

//获取检验与未检验的单子与项目的数量
export function getCheckAndProjectNum(params) {
    return request({
      url: '/home/checkProjectNum',
      method: 'get',
      params
    })
}

 src/assets/404_images/bg.png

 src/layout/components/AppMain.vue

 src/main.js

@@ -14,6 +14,11 @@
import store from './store'
import router from './router'

//引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts


import '@/icons' // icon
import '@/permission' // permission control


 src/router/index.js

@@ -192,9 +192,16 @@
    children: [
      {
        path: 'inspectionApplication',
        name: 'InspectionApplication',
        name: 'inspectionApplication',
        component: () => import('@/views/experiment/inspectionApplication/index'),
        meta: { title: '新增检验', icon: 'tree' }
      },
        {
          path: 'Viewdetails',
          name: 'Viewdetails',
          hidden: true ,
          component: () => import('@/views/experiment/inspectionApplication/Viewdetails/index'),
          meta: { title: '详情页', icon: 'tree' }
      },
      {
        path: 'planAssignments',
@@ -443,6 +450,20 @@
      }
    ]
  },
  {
    path: '/baseData',
    component: Layout,
    redirect: '/baseData/basicDataMessage',
    meta: { title: '基础数据', icon: 'el-icon-s-tools' },
    children: [
      {
        path: '/basicDataMessage',
        name: 'BasicDataMessage',
        component: () => import('@/views/basicData/index'),
        meta: { title: '基础数据', icon: 'el-icon-s-tools' }
      }
    ]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

 src/styles/element-ui.scss

@@ -103,9 +103,6 @@
// .el-menu-popup{
//   min-width: 100px !important;
// }
.el-menu--vertical{
  max-width: 100px !important;
}

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
  min-width: 100px !important;

 src/styles/sidebar.scss

@@ -107,7 +107,6 @@

    & .nest-menu .el-submenu>.el-submenu__title,
    & .el-submenu .el-menu-item {
      min-width: $sideBarWidth !important;
      background-color: $subMenuBg !important;

      &:hover {
@@ -301,12 +300,11 @@
  }
  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {
    width: 100px;
    height: 30px !important;
    min-width: 100px !important;
    line-height: 30px;
    text-align: left !important;
    height: 40px !important;
    line-height: 40px;
        padding-left: 20px !important;
    font-size: 10px;
        width: 100% !important;
    justify-content: start !important;
    background-color: $subMenuBg !important;
    color: $subMenuHover !important;
@@ -330,6 +328,8 @@
    max-height: 100vh;
    overflow-y: auto;
    background-color: #fff;
        width: 150px !important;
        padding: 0 !important;
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

 src/views/CNAS/nonConformanceManage/index.vue

@@ -1,5 +1,214 @@
<template>
    <div class="content-main">
        <div class="top-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="录入日期:" style="margin-right: 20px;">
                <el-date-picker
                    v-model="searchData.entry_date"
                    type="date"
                    placeholder="请选择录入日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="审核日期:" style="margin-right: 20px;">
                <el-date-picker
                    v-model="searchData.check_date"
                    type="date"
                    placeholder="请选择审核日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="状态:" style="margin-right: 20px;">
                <el-select v-model="searchData.state" placeholder="全部" style="width: 100px;">
                  <el-option
                    v-for="item in stateoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="部门:" style="margin-right: 20px;">
                <el-input v-model="searchData.department" placeholder="请输入部门">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchInspections">查询</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
            <el-form class="rightBtn">
              <el-form-item class="createBtn">
                <el-button type="primary" icon="el-icon-document-add" style="margin-right: 10px;">新增记录</el-button>
              </el-form-item>
              <el-form-item class="getDataBtn">
                <el-button type="primary" icon="el-icon-download">导出</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div class="library-table">
      <div class="table-header">
        <el-radio-group v-model="radioValue" @change="radioclick">
          <el-radio-button v-for="item in conditionsOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="table-box">
        <el-table
                ref="recordTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="recordTable"
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  min-width="10%">
                  <template slot-scope="scope">
                    <el-checkbox v-model="checked"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="标题"
                  min-width="12%"
                />
                <el-table-column
                  prop="content"
                  label="内容"
                  min-width="12%"
                />
                <el-table-column
                  prop="level"
                  label="等级"
                  min-width="12%"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  min-width="8%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="12%">
                  <template slot-scope="scope">
                    <span v-if="scope.row.state === 1" style="color: red;">未读</span>
                    <span v-if="scope.row.state === 2" style="color: green;">已读</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sender"
                  label="发件人"
                  min-width="8%"
                />
                <el-table-column
                  prop="create_time"
                  label="创建时间"
                  min-width="12%"
                />
                <el-table-column
                  label="操作"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="readRow(scope.row)">标为已读</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
    <div>
        ä¸ç¬¦åˆé¡¹ç®¡ç†
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            searchData:{
                entry_date: '',
                check_date: '',
                state: 0,
                department: ''
            },
            stateoptions:[{
                value: 0,
                label: '已关闭'
            },{
                value: 1,
                label: '待关闭'
            }],
            recordTable:[],
            currentPage: 0,
            pageSize:5,
            total: 20
        }
    }
}
</script>

<style lang="scss" scoped>
.content-main{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    .top-bar{
      margin: -25px -15px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 5px 24px 0px 24px;
      .rightBtn{
        display: flex;
        justify-content: space-between;
      }
    }
    .library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
}
</style>

 src/views/basicData/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,551 @@
<template>
  <div class="main_div">
    <div class="top_div">
      <span>样品名称：</span>
      <el-select
        v-model="params.material"
        size="small"
        placeholder="请选择样品名称"
      >
        <el-option
          v-for="item in productModelSelectmater"
          :value="item"
          :key="item.index"
          :label="item"
        ></el-option>
      </el-select>
      <span class="top_div_span">项目分组：</span>
      <el-input
        v-model="params.father"
        placeholder="请输入项目分组"
        style="width: 10%"
        size="small "
      ></el-input>
      <span class="top_div_span">项目名称：</span>
      <el-input
        v-model="params.name"
        placeholder="请输入项目名称"
        style="width: 10%"
        size="small "
      ></el-input>
      <el-button
        type="primary"
        class="top_div_button"
        size="small"
        @click="selectProductModelTable"
        >查询</el-button
      >
      <el-button class="top_div_button" size="small" @click="params = {}"
        >重置</el-button
      >
      <div style="float: right">
        <el-button
          class="top_div_button"
          type="primary"
          size="small"
          icon="el-icon-folder-add"
          @click="centerDialogVisible = true"
          >新增</el-button
        >
        <el-dialog
          :visible.sync="centerDialogVisible"
          width="30%"
          right
          :before-close="handleClose"
        >
          <template slot="title">
            <div class="addTop">
              <span>{{ isUpdate ? "更新" : "新增" }}基础数据</span>
            </div>
          </template>
          <el-form :model="form" :rules="rules" ref="ruleForm" class="addForm">
            <el-form-item prop="material" required>
              <span>样品名称：</span>
              <el-select
                v-model="form.material"
                style="width: 85%"
                placeholder="请选择样品名称"
              >
                <el-option
                  v-for="(item, index) in productModelSelectmater"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>项目分组：</span>
              <el-select
                v-model="form.father"
                style="width: 85%"
                placeholder="请选择项目分组"
              >
                <el-option
                  v-for="(item, index) in projectGroupingOptions"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-row :gutter="24">
              <el-col :span="12"
                ><el-form-item prop="name" required
                  ><span>项目名称：</span>
                  <el-input
                    style="width: 70%"
                    v-model="form.name"
                    placeholder="请输入项目名称"
                  ></el-input></el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item prop="unit">
                  <span
                    v-html="'单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：'"
                  ></span>
                  <el-input
                    style="width: 70%"
                    v-model="form.unit"
                    placeholder="请输入单位"
                  ></el-input></el-form-item
              ></el-col>
            </el-row>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false" size="small "
              >取 æ¶ˆ</el-button
            >
            <el-button type="primary" @click="submitAdd" size="small ">{{
              isUpdate ? "更 æ–°" : "保 å­˜"
            }}</el-button>
          </span>
        </el-dialog>
        <el-button
          class="top_div_button"
          icon="el-icon-delete-solid"
          size="small"
          style="color: #00a5ff"
          @click="deleteListClick"
          >删除</el-button
        >
      </div>
    </div>
    <div class="table_div">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="name"
        border
        height="calc(100vh - 250px)"
        default-expand-all
        ref="multipleTable"
        @select="selectTr"
        @select-all="selectAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="selection" label="序号"> </el-table-column>
        <el-table-column
          type="index"
          width="50px"
          label="序号"
        ></el-table-column>
        <el-table-column label="项目名称" sortable>
          <template scope="scope">
            <el-tag
              ><div
                class="firstDiv"
                :style="`color: ${
                  scope.row.code == '[1]' ? '#16a7ff' : '#58c173'
                }`"
              >
                {{ scope.row.code == "[1]" ? "01" : "02" }}
              </div>
              <span style="color: black">{{ scope.row.name }}</span></el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.code == '[2]' || scope.row.edit == true">
              <el-button type="text" size="mini" @click="childrenClick(scope)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="deleteTreeChildren(scope)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  addStandardProjectGroupApi,
  productModelSelectmaterApi,
  addproductModelApi,
  selectproductModelApi,
  deleteProductModelApi,
  selectproductModelByIdApi,
  updateProductModelApi,
  deleteListApi,
} from "@/api/basicData/index";
export default {
  name: "BasicDataMessage",
  data() {
    return {
      isAllSelect: false,
      projectGroupingOptions: [],
      productModelSelectmater: [],
      value: "",
      isUpdate: false,
      projectName: "",
      tableData: [],
      centerDialogVisible: false,
      deleteList: [],
      form: {
        material: "", // æ ·å“åç§°
        father: "", // é¡¹ç›®åˆ†ç»„
        name: "", // é¡¹ç›®åç§°
        unit: "", // å•ä½
      },
      params: {
        material: "",
        father: "",
        name: "",
      },
      rules: {
        material: [
          { required: true, message: "请选择样品名称", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          {
            min: 2,
            max: 25,
            message: "长度在 2 åˆ° 25 ä¸ªå­—符",
            trigger: "blur",
          },
        ],
        unit: [
          { required: true, message: "请输入单位", trigger: "blur" },
          {
            min: 1,
            max: 25,
            message: "长度在 1 åˆ° 25 ä¸ªå­—符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitAdd() {
      if (!this.isUpdate) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            addproductModelApi(this.form).then((res) => {
              this.centerDialogVisible = false;
              this.$message({
                message: res.message,
                type: "success",
              });
              this.selectProductModelTable();
            });
          }
        });
      } else {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            updateProductModelApi(this.form).then((res) => {
              this.centerDialogVisible = false;
              this.$message({
                message: res.message,
                type: "success",
              });
              this.selectProductModelTable();
            });
          }
        });
      }
    },
    async selectProductMaster() {
      await productModelSelectmaterApi().then((res) => {
        this.productModelSelectmater = res.data;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.centerDialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
    selectProductModelTable() {
      selectproductModelApi(this.params).then((res) => {
        res.data.forEach((i) => {
          if (i.name === undefined) {
            i.name = i.children[0].name;
            i.unit = i.children[0].unit;
            i.id = i.children[0].id;
            i.edit = true;
            delete i.children;
          }
        });
        this.tableData = res.data;
        this.selectDataList();
      });
    },
    childrenClick(scope) {
      this.isUpdate = true;
      let father = "";
      selectproductModelByIdApi(scope.row.id).then((res) => {
        let result = res.data;
        this.form.name = result.name;
        this.form.material = result.material;
        this.form.father = result.father;
        this.form.unit = result.unit;
        this.form.id = scope.row.id;
      });
      this.centerDialogVisible = true;
    },
    selectDataList() {
      this.tableData.forEach((a) => {
        a.code = "[1]";
        if (a.children != undefined) {
          a.children.forEach((b) => {
            b.code = "[2]";
          });
        }
      });
    },
    deleteTreeChildren(scope) {
      deleteProductModelApi(scope.row.id).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.selectProductModelTable();
      });
    },

    // è¡¨æ ¼æ ‘全部选中配置
    // å…¨é€‰/取消选操作
    selectAll(val) {
      this.isAllSelect = !this.isAllSelect;
      let data = this.tableData;
      this.toggleSelect(data, this.isAllSelect, "all");
      // è‡ªå®šä¹‰
      if (this.isAllSelect) {
        val.forEach((i) => {
          let isExist = false;
          this.deleteList.findIndex((c) => {
            if (c === i.id) {
              isExist = true;
            }
          });
          if (!isExist && i.id !== undefined) {
            this.deleteList.push(i.id);
          }
        });
      } else {
        this.deleteList.splice(0, this.deleteList.length);
      }
      // è‡ªå®šä¹‰ç»“束
    },
    //选择某行
    selectTr(selection, row) {
      this.$set(row, "isChecked", !row.isChecked);
      this.$nextTick(() => {
        this.isAllSelect = row.isChecked;
        this.toggleSelect(row, row.isChecked, "tr");
      });

      if (row.isChecked === true) {
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.push(i.id);
          });
        } else {
          this.deleteList.push(row.id);
        }
      } else if (row.isChecked === false) {
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.findIndex((c, index) => {
              if (c === i.id) {
                this.deleteList.splice(index, 1);
                return;
              }
            });
          });
        }
        this.deleteList.findIndex((c, index) => {
          if (c === row.id) {
            this.deleteList.splice(index, 1);
            return;
          }
        });
      }
    },
    //递归子级
    toggleSelect(data, flag, type) {
      if (type === "all") {
        if (data.length > 0) {
          data.forEach((item) => {
            this.toggleSelection(item, flag);
            if (item.children && item.children.length > 0) {
              this.toggleSelect(item.children, flag, type);
            }
          });
        }
      } else {
        if (data.children && data.children.length > 0) {
          data.children.forEach((item) => {
            item.isChecked = !item.isChecked;
            this.$refs.multipleTable.toggleRowSelection(item, flag);
            this.toggleSelect(item, flag, type);
          });
        }
      }
    },
    //改变选中
    toggleSelection(row, flag) {
      this.$set(row, "isChecked", flag);
      this.$nextTick(() => {
        if (flag) {
          this.$refs.multipleTable.toggleRowSelection(row, flag);
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      });
    },
    // è¡¨æ ¼æ ‘全部选中配置  ç»“束
    deleteListClick() {
      deleteListApi(this.deleteList).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.selectProductModelTable();
      });
    },
  },
  mounted() {
    this.selectProductMaster().then((res) => {
      this.params.material = this.productModelSelectmater[0];
      this.selectProductModelTable();
    });
  },
  watch: {
    centerDialogVisible: {
      handler(newVal, oldVal) {
        if (newVal == true) {
          addStandardProjectGroupApi().then((res) => {
            this.projectGroupingOptions = res.data;
          });
        } else {
          // è¯·æ±‚成功清除数据
          this.form = {};
          // æäº¤æˆåŠŸæ¸…除检验
          this.$refs.ruleForm.resetFields();
          this.isUpdate = false;
        }
      },
    },
  },
};
</script>

<style>
.el-tag.el-tag {
  border-color: transparent;
  background-color: transparent;
}
.el-tag.el-tag:hover {
  border-color: transparent;
  background-color: transparent;
}
.firstDiv {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eff5ff;
  margin-top: 5px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.main_div {
  width: 100%;
  position: relative;
  padding: 0 10px 10px 10px;
}
.el-dialog__header {
  padding: 0;
}
.el-dialog__headerbtn {
  top: 0;
}
.el-dialog__close {
  padding: 8px 0;
  color: #ffffff !important;
}
.addForm {
  padding: 20px 20px 0 20px;
}
.addForm .el-form-item__error {
  left: 66px;
}
.el-dialog {
  border-radius: 10px;
}
.el-dialog__body {
  padding: 30px 20px 0 20px;
}
.addTop {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #00a5ff;
  color: #ffffff;
  padding: 8px 20px;
  float: left;
  height: 30px;
  width: 100%;
}
.addTop span {
  font-size: 16px;
  font-weight: 700;
}
.table_div {
  margin-top: 10px;
  width: 100%;
  height: calc(100vh - 230px);
  background-color: #ffffff;
  padding: 10px;
}

.top_div {
  height: 120px;
  width: 100%;
  padding: 30px 40px;
  background-color: #ffffff;
}
.top_div_span {
  margin-left: 50px;
}
.top_div_button {
  margin-left: 20px;
}
</style>

 src/views/experiment/inspectionApplication/Viewdetails/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,280 @@
<template>
<div> 
    <div style="overflow: hidden;">
        <el-card style="margin: 10px;" v-model="searchData" >
        <div slot="header" class="clearfix">
            <span>
                <i slot="prefix" class="el-icon-s-home" />               
                å®žéªŒç®¡ç†/原材料检验单</span>
        </div>
        <div class="card-content">
            <el-row :gutter="80">    
                <el-form ref="form" :model="searchData" label-width="80px">
                    <el-col :span="6">
                        <el-form-item label="来料日期:" >
                            <el-input :disabled="true" v-model="searchData.from_time"></el-input>
                            
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="供应商名称:" >
                            <el-input :disabled="true" v-model="searchData.supplier"></el-input>
                        </el-form-item>
                    </el-col>                    
                    <el-col :span="6">
                        <el-form-item label="产品编号:">
                            <el-input :disabled="true" v-model="searchData.mcode"></el-input>
                        </el-form-item> 
                    </el-col>
                </el-form>
            </el-row>
            <el-row :gutter="80">    
                <el-form ref="form" :model="searchData" label-width="80px">
                    <el-col :span="6">
                        <el-form-item label="原材料名称:">
                            <el-input :disabled="true" v-model="searchData.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">

                        <el-form-item label="规格型号:">
                            <el-input :disabled="true" v-model="searchData.specifications"></el-input>                         
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="6">

                        <el-form-item label="单位:">
                            <el-input :disabled="true" v-model="searchData.unit"></el-input>                         
                        </el-form-item> 
                    </el-col>
                </el-form>
            </el-row>
            <el-row :gutter="80">    
                <el-form ref="form" :model="searchData" label-width="80px">
                    <el-col :span="6">
                        <el-form-item label="数量:">
                            <el-input :disabled="true" v-model="searchData.num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">

                        <el-form-item label="登记日期:">
                            <el-input :disabled="true" v-model="searchData.end_time"></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="6">

                        <el-form-item label="登记人:">
                            <el-input :disabled="true" v-model="searchData.userName"></el-input>                      
                        </el-form-item> 
                    </el-col>
                </el-form>
            </el-row>
        </div>            
        </el-card> 
    
    
                <el-row style="margin: 5px;">
                    <el-col :span="12" style="line-height: 32px;">检验项目</el-col>
                    <el-col :span="12" style="text-align: right;">
                        <!-- <el-button ic size="medium " @click="()=>{}">保存</el-button> -->
                        <el-button icon="el-icon-refresh-lef" size="medium " style="background-color: cornflowerblue;" @click="goback">返回</el-button>
                    </el-col>                   
                </el-row>
        <div>        
            <el-card style="margin: 10px;">
                <el-table
                    :data="tableData"
                    border      
                    style="width: 100%">
                    <el-table-column
                    label="序号"
                    type="index"
                    width="50">
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="项目"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="单位"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="kk"
                        label="标准值">
                    </el-table-column>
                    <el-table-column
                        prop="zz"
                        label="内控值">
                    </el-table-column>
                    <el-table-column
                        prop="oo"
                        wight="200"
                        label="经验人">
                        <template>
                            <el-select v-model="value" placeholder="黄晓明">
                                <el-option
                                    v-for="item in cities"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                    </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="pp"
                        label="实验设备">
                        <template>
                            <el-select v-model="value" placeholder="拉力机">
                                <el-option
                                v-for="item in cities"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>

            </el-card> 
        </div>           
    </div>
</div>       
</template>
<script>
  import { selectInspectsList, selectAll, addInspect} from '@/api/experiment/planAssignments'
export default {
    data(){
        return {
            searchData:{
                from_time:'',
                supplier:'',
                mcode:'',
                name:'',
                specifications:'',
                unit:'',
                num:'',
                userName:'',
                end_time:'',

            },
            value:{},
            cities:[{
                value: 'Beijing',
                label: '黄小明'
                }, {
                value: 'Shanghai',
                label: '黄小明'
                }, {
            }],
            tableData:[{            
            date: '导线',
            name: 'mm',
            kk:'30.0',
            zz:'30.0',
            oo:'黄晓明',
            pp:'拉力机',
          },{
            date: '导线',
            name: 'mm',
            kk:'30.0',
            zz:'30.0',
            oo:'黄晓明',
            pp:'拉力机',
          },{
            date: '导线',
            name: 'mm',
            kk:'30.0',
            zz:'30.0',
            oo:'黄晓明',
            pp:'拉力机',
          },{
            date: '导线',
            name: 'mm',
            kk:'30.0',
            zz:'30.0',
            oo:'黄晓明',
            pp:'拉力机',
          },{
            date: '导线',
            name: 'mm',
            kk:'30.0',
            zz:'30.0',
            oo:'黄晓明',
            pp:'拉力机',
          }],
          currentPage:1,
          pageSize:8,
          id:''
        }
    },
    created(){
        console.log(this.$route.query.icode);
        this.id = this.$route.query.icode;
        this.selectInspectsList()
    },
    methods: {
      async goback(){
        
        this.$router.push({name:'inspectionApplication'})
      },
      async selectInspectsList() {

        // èŽ·å–分页列表
        const res = await selectInspectsList({ countSize: this.pageSize, pageSize: this.currentPage ,message:this.id})
        // this.inspectionTable = data
        console.log(res)
        
    //     res.data.forEach((item) => {
    //       var formTime = item["DATE_FORMAT(`form_time`,'%Y-%m-%d')"]
    //       var startTime = item["DATE_FORMAT(i"]["`start_time`,'%Y-%m-%d')"]
    //       var endTime = item["DATE_FORMAT(i"]["`end_time`,'%Y-%m-%d')"]
    //       var checkdate = startTime + '~' + endTime
    //       var createTime = item["DATE_FORMAT(i"]["`create_time`,'%Y-%m-%d')"]
    //       item['formTime'] = formTime // æ¥æ–™æ—¥æœŸ
    //       item['checkdate'] = checkdate // æ£€éªŒæ—¥æœŸ
    //       item['createTime'] = createTime // ç™»è®°æ—¥æœŸ
    //   })
        this.searchData.mcode = res.data.row[0].mcode
        this.searchData.supplier = res.data.row[0].supplier
        this.searchData.from_time = res.data.row[0]["DATE_FORMAT(`form_time`,'%Y-%m-%d')"]
        this.searchData.name = res.data.row[0].name
        this.searchData.specifications = res.data.row[0].specifications
        this.searchData.unit = res.data.row[0].unit
        this.searchData.num = res.data.row[0].num
        this.searchData.end_time = res.data.row[0]["DATE_FORMAT(i"]["`end_time`,'%Y-%m-%d')"]
        this.searchData.userName = res.data.row[0].userName



        
        const data = res.data.row
        data.forEach((item) => {
          var formTime = item["DATE_FORMAT(`form_time`,'%Y-%m-%d')"]
          var startTime = item["DATE_FORMAT(i"]["`start_time`,'%Y-%m-%d')"]
          var endTime = item["DATE_FORMAT(i"]["`end_time`,'%Y-%m-%d')"]
          var checkdate = startTime + '~' + endTime
          var createTime = item["DATE_FORMAT(i"]["`create_time`,'%Y-%m-%d')"]
          item['formTime'] = formTime // æ¥æ–™æ—¥æœŸ
          item['checkdate'] = checkdate // æ£€éªŒæ—¥æœŸ
          item['createTime'] = createTime // ç™»è®°æ—¥æœŸ
      })
        this.inspectionTable = data
        this.total = res.data.total
      },
}
}
</script>
<style lang="scss" scoped>

</style>
     

 src/views/experiment/inspectionApplication/index.vue

@@ -154,7 +154,7 @@
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <el-button type="text" size="small" >提交</el-button>
                    <!-- <el-button type="text" size="small" >提交</el-button> -->
                    <el-button type="text" size="small" >作废</el-button>
                  </template>
                </el-table-column>
@@ -164,7 +164,7 @@
                <el-pagination
                  class="pagination"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 30]"
                  :page-sizes="[1, 10, 20, 30]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
@@ -174,6 +174,7 @@
              </div>
            </div>
          </div>
          <!-- å¯¹è¯æ¡† -->
          <div class="checkType">
            <el-dialog
              title="新增检验单"
@@ -533,6 +534,7 @@
      </template>
      <template v-else>
        <router-view />

      </template>
    </div>
  </template>
@@ -546,8 +548,9 @@
        searchData: {
          applicationnumber: '',
          type: '',
          state: ''
          state: '',
        },
        icode:'',
        inspectionTable: [],
        rawMaterialTable: [],
        commisionTable: [{
@@ -623,7 +626,7 @@
        }],
        currentPage: 1,
        total: 20, // æ€»æ¡æ•°
        pageSize: 5, // æ¯é¡µçš„数据条数
        pageSize: 8, // æ¯é¡µçš„数据条数
        radioValue: '全部',
        checkTypeVisible: false,
        type: '', // é»˜è®¤ä¸é€‰ä¸­çš„状态
@@ -649,9 +652,24 @@
      if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
    },
    methods: {
      async handleClick(row){
        // console.log(item);
        // const res = await ddd({goodId:id})
        // this.$message({
        //   message: '恭喜你，这是一条成功消息',
        //   type: 'success'
        // });

        // console.log(res);
        this.inspectionTable = row;
        console.log(row.icode);
        this.icode = row.icode
        this.$router.push({name:'Viewdetails',query: {icode:row.icode}});
        this.selectInspectsList()
      },
      async selectInspectsList() {
        // èŽ·å–分页列表
        const res = await selectInspectsList({ countSize: this.pageSize, pageSize: this.currentPage })
        const res = await selectInspectsList({ countSize: this.pageSize, pageSize: this.currentPage,message:this.icode})
        // this.inspectionTable = data
        // console.log(res.data.row)
        const data = res.data.row
@@ -703,11 +721,9 @@
      this.total = this.inspectionTable.length
    },
    reset(){
      this.searchData = {
          applicationnumber: '',
          type: '',
          state: ''
      }
      this.countSize = 1
      this.searchData = { }
      // console.log('2222');
      this.selectInspectsList()
    },
    //被选中的信息 å•é€‰    
@@ -727,31 +743,31 @@
      this.rawmaterialVisible = false
    },
    async handleRadioChange(){
      console.log(this.type)
      if(this.type === 0){
        // åŽŸææ–™æŠ¥æ£€
        this.rawmaterialVisible = true
        const res = await selectAll({type: this.type})
        var data = res.data
        data.forEach((item)=>{
          var checkdate = []
          checkdate.push(item['createTime'])
          checkdate.push(item['updateTime'])
          item['checkdate'] = checkdate // æ£€éªŒæ—¥æœŸ
        })
        this.rawMaterialTable = data
        // this.rawmaterialVisible = true
        // const res = await selectAll({type: this.type})
        // var data = res.data
        // data.forEach((item)=>{
        //   var checkdate = []
        //   checkdate.push(item['createTime'])
        //   checkdate.push(item['updateTime'])
        //   item['checkdate'] = checkdate // æ£€éªŒæ—¥æœŸ
        // })
        this.$router.push({ name: 'ReportForInspection' });
      }else if(this.type === 1){
        this.commisionVisible = true
        const res = await selectAll({type: this.type})
        var data = res.data
        data.forEach((item)=>{
          var checkdate = []
          checkdate.push(item['startTime'])
          checkdate.push(item['endTime'])
          item['checkdate_'] = item['startTime'] + '~' + item['endTime']
          item['checkdate'] = checkdate // æ£€éªŒæ—¥æœŸ
        })
        this.commisionTable = res.data
        // this.commisionVisible = true
        // const res = await selectAll({type: this.type})
        // var data = res.data
        // data.forEach((item)=>{
        //   var checkdate = []
        //   checkdate.push(item['startTime'])
        //   checkdate.push(item['endTime'])
        //   item['checkdate_'] = item['startTime'] + '~' + item['endTime']
        //   item['checkdate'] = checkdate // æ£€éªŒæ—¥æœŸ
        // })
        // this.commisionTable = res.data
        this.$router.push({ name: 'CommissionInspection' });
      }
    },
    // æ–°å¢žæ£€éªŒ

 src/views/experiment/planAssignments/plan.vue

@@ -18,6 +18,15 @@
        padding: 15px;
        background-color: white;
        height: calc(100vh - 15vh);
        overflow-y: auto;
    }

    .order_num{
        border-radius: 1rem;
        width: 35px;
        height: 25px;
        text-align: center;
        margin-right: 8px;
    }
</style>
<style>
@@ -28,6 +37,7 @@

    .plan .cell {
        color: #333;
        display: flex;
    }
</style>

@@ -51,6 +61,14 @@
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column prop="date" label="申请单号">
                    <template slot-scope="scope">
                        <div style="display: flex;">
                            <div v-if="scope.row.code=='01'" style="color: #3caaff;background-color: #eff5ff;" class="order_num">01</div>
                            <div v-else-if="scope.row.code=='02'" style="color: #57c981;background-color: #f1fbf4;" class="order_num">02</div>
                            <div v-else-if="scope.row.code=='03'" style="color: #dfa8fb;background-color: #faf2ff;" class="order_num">03</div>
                            <div>{{scope.row.date}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="检验结果">
                </el-table-column>
@@ -60,9 +78,9 @@
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" v-if="isIfReport(scope.row)">上报</el-button>
                        <el-button size="mini" type="warning" @click="openUpDia(scope.row)"
                            v-else-if="scope.row.insId==undefined&&scope.row.address==null">分配</el-button>
                            v-else-if="scope.row.code=='03'&&scope.row.insId==undefined&&scope.row.address==null">分配</el-button>
                        <el-button size="mini" type="success" @click="openUpInsDia(scope.row)"
                            v-else-if="scope.row.insId==undefined&&scope.row.name==null">检验</el-button>
                            v-else-if="scope.row.code=='03'&&scope.row.insId==undefined&&scope.row.name==null">检验</el-button>
                    </template>
                </el-table-column>
            </el-table>
@@ -159,8 +177,15 @@
                        id: 34,
                        date: '2016-05-01',
                        name: null,
                        res: '[{"number": 1,"res": "不合格"},{"number": 2}]',
                        res: '[{"number": 1,"res": "不合格"},{"number": 3,"res": "不合格"}]',
                        address: '上海市普陀区金沙江路 1519 å¼„',
                        children: [{
                            id: 35,
                            date: 'hhh',
                            name: null,
                            res: '[{"number": 1},{"number": 2}]',
                        address: '上海市普陀区金沙江路 1519 å¼„'
                        }]
                    }]
                }, {
                    id: 2,
@@ -200,11 +225,16 @@
        methods: {
            selectDataList() {
                this.tableData.forEach(a => {
                    a.code = '[1]'
                    a.code = '01'
                    if (a.children != undefined) {
                        a.children.forEach(b => {
                            b.code = '[2]'
                            b.res = JSON.parse(b.res)
                            b.code = '02'
                            if (b.children != undefined) {
                                b.children.forEach(c => {
                                    c.code = '03'
                                    c.res = JSON.parse(c.res)
                                })
                            }
                        })
                    }
                })

 src/views/experiment/reportAuditing/index.vue

@@ -23,17 +23,21 @@
          </el-dropdown-menu>
        </el-dropdown>
      </el-form>
      <el-form>
        <el-button class="rightBtn" type="primary">审核</el-button>
      </el-form>
    </div>







    <div class="library-table">
      <div class="table-header">
        <div class="search-bar">
          <el-radio-group v-model="checkStatus" @change="handleRadioChange">
            <el-radio-button>全部</el-radio-button>
            <el-radio-button label="0">待提交</el-radio-button>
            <el-radio-button label="2">待通过</el-radio-button>
            <el-radio-button label="0">待通过</el-radio-button>
            <el-radio-button label="2">通过</el-radio-button>
          </el-radio-group>
          <el-checkbox v-model="checked" style="margin-left: 20px"
            >仅看我的</el-checkbox
@@ -79,7 +83,7 @@
            <template slot-scope="scope">
              <span>
                <el-tag type="warning">{{
                  scope.row.status == 0 ? "待提交" : "待通过"
                  scope.row.status == 0 ? "待通过" : "通过"
                }}</el-tag>
              </span>
            </template></el-table-column
@@ -93,8 +97,36 @@
                type="text"
                size="small"
                @click="handleClick(scope.row)"
                >查看详细</el-button
              >
                >查看详细
              </el-button>
            <el-button  type="text" size="small" @click="checkskip = true">审核</el-button>

            <el-dialog
              title="原始记录审核"
              :visible.sync="checkskip"
              width="30%"
              :before-close="handleClose">
              <el-form :model="form">
                <el-form-item label="请选择审核结果" :label-width="formLabelWidth">
                </el-form-item>
                <el-row :gutter="20">
                  <el-col :span="6" :offset="5">
                <!-- <el-button type="primary" style="background-color: rgb(208, 201, 192);">退回</el-button> -->
                <el-button style="background-color: rgb(206, 211, 216);">退回</el-button>
                  </el-col>
                  <el-col :span="6" :offset="3">
                <!-- <el-button type="primary" style="background-color: rgb(181, 237, 125);">通过</el-button> -->
                <el-button style="background-color: rgb(192, 236, 148);">通过</el-button>
                  </el-col>
                </el-row>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="checkskip = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="checkskip= false">ç¡® å®š</el-button>
              </div>
            </el-dialog>

            </template>
          </el-table-column>
        </el-table>
@@ -127,6 +159,10 @@
      total: 0,
      pageSize: 10,
      checked: true,
      checkskip: false,
      form:{},
      handleClose:'',
      formLabelWidth: '120px'
    };
  },
  created() {
@@ -157,6 +193,10 @@
      this.checkStatus = undefined;
      this.getData();
    },
    //审核跳转
    // checkskip() {

    // },
    // æŸ¥è¯¢åˆ—表
    async getData() {
      const params = {

 src/views/home/index.vue

@@ -1,96 +1,406 @@
<template>
  <div class="home-main">
    <div class="home-header-welcome">
      <div class="welcome-left">
        <div class="left-avatar" />
        <div class="left-tips">
          <div>Hi jack，欢迎使用ZT-LIMS</div>
          <div>今天是2023å¹´07月07日 æ˜ŸæœŸäº”</div>
    <div class="content-main">
      <div class="echart1">
        <el-row :gutter="10">
          <el-col :span="16">
            <el-card class="box-card" :body-style="{ padding: '0px 10px',height:'120px' }">
              <p style="font-size: 10px;margin-left: 10px;">检验总数统计</p>
               <el-row :gutter="10">
                  <el-col :span="6" >
                    <img :src="imgSrc" />
                    <div class="card-text">
                      <h6>检验单已检验总数</h6>
                      <p>{{insNum}}</p>                
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <img :src="imgSrc"/>
                    <div class="card-text">
                      <h6>检验单未检验总数</h6>
                      <p>{{insUnNum}}</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <img :src="imgSrc"/>
                    <div class="card-text">
                      <h6>检验项目已检验总数</h6>
                      <p>{{insproNum}}</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <img :src="imgSrc"/>
                    <div class="card-text">
                      <h6>检验项目未检验总数</h6>
                      <p>{{insproUnNum}}</p>
                    </div>
                  </el-col>
               </el-row>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" :body-style="{ padding: '0px',height:'120px' }">
              <p style="font-size: 10px;margin-left: 10px;color: #2fcf10;">已检验</p>  
              <el-table
                :data="verifiedData"
                :default-sort = "{prop: 'date', order: 'descending'}"
                :cell-style="{margin:'0',padding:'2px 0px'}"
                :header-cell-style="{margin:'0',padding:'0',backgroundColor:'#f0f7ff',color:'#0050a7'}">
                  <el-table-column prop="no" label="排名" sortable width="110"></el-table-column>
                  <el-table-column prop="result" label="检验结论" width="110"></el-table-column>
                  <el-table-column prop="num" label="检验数量" sortable width="110"></el-table-column>
                  <el-table-column prop="chact" label="检验占比" sortable width="110"></el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="echart2">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px',height:'180px' }">
              <p>原材料合格率</p>  
              <div id="materialPieChart" style="width:100%;height:180px"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px',height:'180px' }">
              <p>成品合格率</p>  
              <div id="finishedPieChart" style="width:100%;height:180px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card :body-style="{ padding: '0px',height:'180px' }">
              <p style="z-index: 10;position: absolute;font-size: 10px;margin-left: 10px;color: #ff0000;">未检验</p>  
              <el-table
                :data="uncheckedData"
                :cell-style="{margin:'0px',padding:'3px 0px'}"
                :header-cell-style="{margin:'0px',padding:'3px 0px',backgroundColor:'#f0f7ff',color:'#0050a7'}">
                  <el-table-column prop="no" label="序号" width="100"></el-table-column>
                  <el-table-column prop="name" label="待检项目" width="120"></el-table-column>
                  <el-table-column prop="instrumentname" label="设备" width="120"></el-table-column>
                  <el-table-column prop="startTime" label="检验时间" width="120">
                  </el-table-column><el-table-column prop="checkname" label="检验人" width="120">
                  </el-table-column><el-table-column prop="endTime" label="预计结束时间" width="120"></el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="echart3">
        <el-card :body-style="{ padding: '0px',height:'300px' }">
          <el-radio-group class="button-group" :input="getDataByType(radioType)"  v-model="radioType" size="mini">
            <el-radio-button label="本周"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="本年"></el-radio-button>
          </el-radio-group>
          <div id="barLineChart" style="width:100%;height:300px;"></div>
        </el-card>
        </div>
      </div>
      <div class="welcome-right">
        <div class="right-centent">
          <div>即将超期待办</div>
          <div>暂无</div>
        </div>
        <div />
        <div class="right-centent">
          <div>已超期待办</div>
          <div>21</div>
        </div>
      </div>
    </div>
    <div class="content-main" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getVerifiedTop3,getUncheckedTop4,getMatAndFinshQualified,getCheckAndProjectNum
} from '@/api/home'
export default {
  name: "home",
  data() {
    return {
      insNum: 0,
      insUnNum: 0,
      insproNum: 0,
      insproUnNum: 1110,
      radioType: "本年",
      imgSrc: require("@/assets/404_images/bg.png"),
      verifiedData: new Array(),
      uncheckedData: new Array(),
    }
  },
  mounted(){
    this.getcheckProjectNum();
    this.getVerifiedData();
    this.getUncheckedData();
    this.getPieChart();
  },
  methods: {
    async getcheckProjectNum(){
      const {data} = await getCheckAndProjectNum();
      this.insNum = data.insNum;
      this.insUnNum = data.insUnNum;
      this.insproNum = data.insproNum;
      this.insproUnNum = data.insproUnNum;
    },
    async getVerifiedData(){
      const { data } = await getVerifiedTop3();
      for(let i=0;i<data.length;i++){
        let val = "";
        if(data[i].result == 0){
            val = "不合格";
        }else if(data[i].result == 1){
            val = "合格";
        }else{
            val = "未检验";
        }
        this.verifiedData.push ({
          no: i+1,
          result: val,
          num: data[i].num,
          chact: data[i].chact + '%'
        }) 
      }
    },
    async getUncheckedData(){
        const {data} = await getUncheckedTop4();
        for(let i=0;i<data.length;i++){
        this.uncheckedData.push ({
          no: i+1,
          name: data[i].name,
          instrumentname: data[i].instrumentname,
          startTime: data[i].startTime,
          checkname: data[i].checkname,
          endTime: data[i].endTime
        }) 
      }  
    },
    initPieChart(elementId,data){
      var chartDom = document.getElementById(elementId);
      var myChart = echarts.init(chartDom);
      window.addEventListener('resize', function() {
        myChart.resize();
      });
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          top: 'center',
          left: 20
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            tooltip: {
              valueFormatter: function(value){
                return value + '%';
              }
            },
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    async getPieChart(){
      const {data} = await getMatAndFinshQualified();
      let material = [
              { value: data.material, name: '合格',itemStyle:{color: '#91cc75'} },
              { value: data.unmaterial, name: '不合格',itemStyle:{color: '#fac858'} },
              { value: data.notmaterial, name: '待检验' },
            ]
      let finished = [
              { value: data.finished, name: '合格',itemStyle:{color: '#91cc75'} },
              { value: data.unfinished, name: '不合格',itemStyle:{color: '#fac858'} },
              { value: data.notfinished, name: '待检验' },
            ]
      //渲染饼状图
      this.initPieChart("materialPieChart",material);
      this.initPieChart("finishedPieChart",finished);
    },
    async getDataByType(label){
      const xAxis = ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
      const bar1Data  = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
      const bar2Data = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];
      const line1Data = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2];
      const line2Data = [3.0, 4.2, 6.3, 5.5, 8.3, 13.2, 20.3, 13.4, 23.0, 21.5, 2.0, 33.2];
      switch(label){
        case "本年":
          this.initBarAndLineChart(xAxis,bar1Data,bar2Data,line1Data,line2Data);
          break;
        case "本月":
            let arr = new Array();
            for(let i=1;i<=31;i++){
                arr.push(i);
            }
            this.initBarAndLineChart(arr,bar1Data,bar2Data,line1Data,line2Data);
          break;
        case "本周":
            let arr2 = new Array("周一","周二","周三","周四","周五","周六","周日");
            this.initBarAndLineChart(arr2,bar1Data,bar2Data,line1Data,line2Data);
          break
      } 
    },
    initBarAndLineChart(xAxis,bar1Data,bar2Data,line1Data,line2Data){
      var chartDom = document.getElementById('barLineChart');
      var myChart = echarts.init(chartDom);
      window.addEventListener('resize', function() {
        myChart.resize();
      });
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['原材料检验', '成品检验', '原材料合格率','成品合格率']
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '检验数量',
            min: 0,
            max: 1000,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '合格率',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '原材料检验',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: bar1Data
          },
          {
            name: '成品检验',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            data: bar2Data
          },
          {
            name: '原材料合格率',
            smooth: true,
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: line1Data
          },
          {
            name: '成品合格率',
            smooth: true,
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: line2Data
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.home-main{
  .home-header-welcome{
  .content-main{
    .echart1{
      .el-table{
          font-weight: bold;
    width: 100%;
    background: #fff;
    height: 84px;
    display: flex;
    border-bottom: 1px solid #f0f2f5;
    padding: 8px 24px 12px 24px;
    justify-content: space-between;
    .welcome-left{
      display: flex;
      align-items: center;
      height: 100%;
      .left-avatar{
        width: 56px;
        height: 56px;
        margin-right: 24px;
        background: #0077DB;
        border-radius: 50%;
          height:100;
          padding:0px;
          margin-left:10px;
      }
      .left-tips{
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        >div:nth-child(1){
          font-size: 20px;
          color: #303133;
        .box-card img{
          width:100%;
          height:100px;
          border-radius: 10px;
        }
        >div:nth-child(2){
          font-size: 14px;
          color: #606266;
        .box-card .card-text{
          position: absolute;
          top:0px;
          h6{
            margin:10px 15px;
          }
          p{
            width:100%;
            text-align: right;
            font-size: 25px;
        }
      }
    }
    .welcome-right{
      width: 250px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .right-centent{
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        >div:nth-child(1){
          color: #909399;
          font-size: 14px;
    .echart2 {
      .el-table{
        font-weight: bold;
        width: 100%;
        height:100;
        padding:0px;
        margin-left:10px;
        padding-top:40px;
        }
        >div:nth-child(2){
          font-size: 24px;
          color: #c0c4cc;
      .el-col{
        margin: 10px 0;
      }
      p{
        position: absolute;
        font-size: 10px;
        margin-left: 10px;
        color:black;
        }
      }
      >div:nth-child(2){
          width: 2px;
          height: 70%;
          background: #f0f2f5;
      }
    .echart3 .button-group{
      margin-top: 10px;
      margin-left: 88%;
      z-index: 10;
    }
  }
}

 src/views/message/message/index.vue

@@ -1,13 +1,253 @@
<template>
  <div>消息</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="标题:" class="sermargin">
                <el-input
                  v-model="searchData.title"
                  class="input-form"
                  placeholder="请输入标题"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="内容:" style="margin-right: 30px;">
                <el-input
                  v-model="searchData.content"
                  class="input-form"
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
              </el-form>
              <el-form>
                <el-button class="deleteBtn" plain type="primary" @click="deleteMessage" >删除</el-button>
                <el-button type="primary" @click="readMessage" style="width: 110px;" >标为已读</el-button>
              </el-form>
    </div>
    <div class="library-table">
      <div class="table-header">
        <el-radio-group v-model="radioValue" @change="radioclick">
          <el-radio-button v-for="item in conditionsOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="table-box">
        <el-table
                ref="messageTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="messageTable"
                @selection-change="handleSelectionChange"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  prop="title"
                  label="标题"
                  min-width="12%"
                />
                <el-table-column
                  prop="content"
                  label="内容"
                  min-width="12%"
                />
                <el-table-column
                  prop="level"
                  label="等级"
                  min-width="12%"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  min-width="8%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="12%">
                  <template slot-scope="scope">
                    <span v-if="scope.row.state === 1" style="color: red;">未读</span>
                    <span v-if="scope.row.state === 2" style="color: green;">已读</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sender"
                  label="发件人"
                  min-width="8%"
                />
                <el-table-column
                  prop="create_time"
                  label="创建时间"
                  min-width="12%"
                />
                <el-table-column
                  label="操作"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="readRow(scope.row)">标为已读</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
              <div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      searchData: {
        title: '',
        content: ''
      },
      radioValue: 0,
      conditionsOptions: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '未读',
          value: 1
        },
        {
          label: '已读',
          value: 2
        }
      ],
      selectionRows:[],
      messageTable:[],
      currentPage:1,
      pageSize: 5,
      total:10,

    }
  },
  created(){

  },
  methods: {
    deleteMessage(){
      console.log(this.selectionRows)
    },
    readMessage(){
      console.log(this.selectionRows)
    },
    // æ•èŽ·è¡¨æ ¼é€‰æ‹©çš„数据
    handleSelectionChange(selection){
      this.selectionRows = selection
    },
    // æ ‡è®°å·²è¯»
    readRow(row){
      console.log(row)
    },
    // åˆ é™¤
    deleteRow(row){
      console.log(row)
    },
    radioclick(){
      console.log(this.radioValue)
    },
    handleSizeChange(val){
      console.log(`当前每页${val}条数据`)
    },
    handleCurrentChange(val){
      console.log(`当前是第${val}页`)
    }
  }

}
</script>

<style lang="scss" scoped>
.content-main{
  width: 100%;
  .top-bar{
    margin: -25px -15px;
    padding: 5px 24px 0px 24px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .sermargin{
      margin-right: 60px;
    }
    .deleteBtn{
      background-color: #fff;
      border: 1px solid rgb(225, 222, 222);
      color: rgb(184, 182, 182);
    }
    .deleteBtn:active {
      outline: none;  /* åŽ»é™¤æŒ‰é’®çš„默认点击时的外边框 */
      box-shadow: 0 0 4px rgb(142, 141, 141);  /* æ·»åŠ ç‚¹å‡»æ—¶çš„阴影效果，颜色设为灰色 */
    }
    .deleteBtn:hover {
      outline: none;  /* åŽ»é™¤æŒ‰é’®çš„默认点击时的外边框 */
      background-color: rgb(233, 233, 233);  /* æ·»åŠ ç‚¹å‡»æ—¶çš„阴影效果，颜色设为灰色 */
    }
    .deleteBtn:focus {
      outline: none;  /* åŽ»é™¤æŒ‰é’®çš„默认点击时的外边框 */
      background-color: rgb(233, 233, 233);  /* æ·»åŠ ç‚¹å‡»æ—¶çš„阴影效果，颜色设为灰色 */
    }
  }
  .library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
}

</style>

 src/views/message/toDo/index.vue

@@ -1,13 +1,235 @@
<template>
  <div>待办</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="标题:" class="sermargin">
                <el-input
                  v-model="searchData.title"
                  class="input-form"
                  placeholder="请输入标题"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="内容:" style="margin-right: 30px;">
                <el-input
                  v-model="searchData.content"
                  class="input-form"
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
              </el-form>
              <el-form>
                <el-button class="deleteBtn" plain type="primary" @click="deleteMessage" >删除</el-button>
                <el-button type="primary" @click="readMessage" style="width: 110px;" >标为已读</el-button>
              </el-form>
    </div>
    <div class="library-table">
      <div class="table-header">
        <el-radio-group v-model="radioValue" @change="radioclick">
          <el-radio-button v-for="item in conditionsOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="table-box">
        <el-table
                ref="toDoTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="toDoTable"
                @selection-change="handleSelectionChange"
                style="width: 100%"
              >
                <el-table-column
                  prop="sender"
                  label="发件人"
                  min-width="8%"
                />
                <el-table-column
                  prop="title"
                  label="标题"
                  min-width="13%"
                />
                <el-table-column
                  prop="todo"
                  label="代办内容"
                  min-width="20%"
                />
                <el-table-column
                  prop="group"
                  label="分组"
                  min-width="15%"
                />
                <el-table-column
                  prop="level"
                  label="等级"
                  min-width="8%"
                />
                <el-table-column
                  prop="create_time"
                  label="创建时间"
                  min-width="12%"
                />
                <el-table-column
                  prop="deadline"
                  label="要求完成时间"
                  min-width="12%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="12%"
                />
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
              <div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>

      </div>

    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      searchData: {
        title: '',
        content: ''
      },
      radioValue: 0,
      conditionsOptions: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '未处理',
          value: 1
        },
        {
          label: '已处理',
          value: 2
        },
        {
          label: '已超期',
          value: 3
        }
      ],
      toDoTable:[],
      selectionRows:[],
      currentPage:1,
      pageSize: 5,
      total:100,

    }
  },
  methods: {
    deleteMessage(){
      console.log(this.selectionRows)
    },
    readMessage(){
      console.log(this.selectionRows)
    },
    // æ•èŽ·è¡¨æ ¼é€‰æ‹©çš„数据
    handleSelectionChange(selection){
      this.selectionRows = selection
    },
    radioclick(){
      console.log(this.radioValue)
    },
    handleSizeChange(val){
      console.log(`当前每页${val}条数据`)
    },
    handleCurrentChange(val){
      console.log(`当前是第${val}页`)
    }
  }

}
</script>

<style lang="scss" scoped>
.content-main{
  width: 100%;
  .top-bar{
    margin: -25px -15px;
    padding: 5px 24px 0px 24px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .sermargin{
      margin-right: 60px;
    }
    .deleteBtn{
      background-color: #fff;
      border: 1px solid rgb(225, 222, 222);
      color: rgb(184, 182, 182);
    }
    .deleteBtn:active {
      outline: none;  /* åŽ»é™¤æŒ‰é’®çš„默认点击时的外边框 */
      box-shadow: 0 0 4px rgb(142, 141, 141);  /* æ·»åŠ ç‚¹å‡»æ—¶çš„阴影效果，颜色设为灰色 */
    }
    .deleteBtn:hover {
      outline: none;  /* åŽ»é™¤æŒ‰é’®çš„默认点击时的外边框 */
      background-color: rgb(233, 233, 233);  /* æ·»åŠ ç‚¹å‡»æ—¶çš„阴影效果，颜色设为灰色 */
    }
    .deleteBtn:focus {
      outline: none;  /* åŽ»é™¤æŒ‰é’®çš„默认点击时的外边框 */
      background-color: rgb(233, 233, 233);  /* æ·»åŠ ç‚¹å‡»æ—¶çš„阴影效果，颜色设为灰色 */
    }
  }
  .library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
}

</style>

 src/views/standardLibrary/index.vue

@@ -1,15 +1,12 @@
<template>
  <div class="standard-library-main">
    <div class="content-main">
      <div class="library-bom" style="width: 300px;">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
      <div class="library-bom" style="width: 300px">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
        <el-button type="text">全部</el-button>
        <el-tree
          ref="tree"
          style="width: 100%;"
          style="width: 100%"
          class="filter-tree"
          :data="standardTree"
          :props="defaultProps"
@@ -21,11 +18,12 @@
          @node-click="nodeClick"
        />
      </div>
      <div class="library-table" style="width: 80%;">
      <div class="library-table" style="width: 80%">
        <div class="table-header">
          <div class="search-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item>
                <span>原材料编码：</span>
                <el-input
                  v-model="searchData.keyword"
                  placeholder="请输入人员名称/原材料名称"
@@ -34,59 +32,116 @@
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="filteredTableData">查询</el-button>
                <el-button type="primary" plain @click="resetBtn">重置</el-button>
                <span>原材料名称：</span>
                <el-input
                  v-model="searchData.keyword"
                  placeholder="请输入原材料名称"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search" />
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="filteredTableData"
                  >查询</el-button
                >
                <el-button type="primary" plain @click="resetBtn"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="serve-btn">
            <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">新增</el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addTreeFormVisible = true"
              >新增</el-button
            >
            <el-button
              class="top_div_button"
              icon="el-icon-delete-solid"
              size="small"
              style="color: #00a5ff"
              @click="deleteListClick"
              >删除</el-button
            >
          </div>
        </div>
        <div class="table-box">
          <el-table
          <!-- <el-table
            ref="tableData"
            row-key="id"
            max-height="680"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :cell-style="{textAlign: 'left'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}"
            :header-cell-style="{
              border: '0px',
              background: '#f5f7fa',
              color: '#606266',
              boxShadow: 'inset 0 1px 0 #ebeef5',
              textAlign: 'left',
            }"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100px"
            >
            <el-table-column type="index" label="序号" width="100px">
              <template v-if="scope.row.index+1" slot-scope="scope">
                {{ scope.row.index+1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="father"
              label="名称"
              width="320px"
            >
            <el-table-column prop="father" label="名称" width="320px">
              <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.father? '':'success'" :style="{borderRadius: '40%',marginRight: '12px'}">{{ scope.row.father? '01':'02' }}</el-tag> {{ scope.row.father || scope.row.name }}
                <el-tag
                  size="mini"
                  :type="scope.row.father ? '' : 'success'"
                  :style="{ borderRadius: '40%', marginRight: '12px' }"
                  >{{ scope.row.father ? "01" : "02" }}</el-tag
                >
                {{ scope.row.father || scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="300px" />
            <el-table-column prop="required" label="标准" width="300px" />
            <el-table-column prop="internal" label="内控制" width="300px" />
          </el-table> -->
          <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="name"
            border
            height="calc(100vh - 250px)"
            default-expand-all
            ref="multipleTable"
            @select="selectTr"
            @select-all="selectAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column type="selection" label="序号"> </el-table-column>
            <el-table-column
              type="index"
              width="50px"
              label="序号"
            ></el-table-column>
            <el-table-column label="项目名称" sortable>
              <template scope="scope">
                <el-tag
                  ><div
                    class="firstDiv"
                    :style="`color: ${
                      scope.row.code == '[1]' ? '#16a7ff' : '#58c173'
                    }`"
                  >
                    {{ scope.row.code == "[1]" ? "01" : "02" }}
                  </div>
                  <span style="color: black">{{ scope.row.name }}</span></el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              width="300px"
            />
            <el-table-column
              prop="required"
              label="标准"
              width="300px"
            />
            <el-table-column
              prop="internal"
              label="内控制"
              width="300px"
            />
              sortable
            ></el-table-column>
          </el-table>
          <!-- å¼¹å‡ºè¡¨å•é¡µ -->
          <div>
@@ -94,7 +149,7 @@
          </div>
          <div>
            <!-- åˆ†é¡µå™¨ -->
            <el-pagination
            <!-- <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageParams.pageSize"
@@ -102,12 +157,18 @@
              :total="pageParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            /> -->
          </div>
        </div>
      </div>
    </div>
    <el-dialog class="addTree" title="添加指标" width="28%" :visible.sync="addTreeFormVisible" @close="closeAddTreeForm">
    <el-dialog
      class="addTree"
      title="添加指标"
      width="28%"
      :visible.sync="addTreeFormVisible"
      @close="closeAddTreeForm"
    >
      <el-form v-model="addTreeForm" label-position="top">
        <el-form-item label="上级">
          <el-cascader
@@ -118,13 +179,22 @@
            @change="changeCascader"
          />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<2" label="物料名称">
        <el-form-item
          v-show="addTreeForm.addTypeArr.length < 2"
          label="物料名称"
        >
          <el-input v-model="addTreeForm.materialName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<3" label="执行标准">
        <el-form-item
          v-show="addTreeForm.addTypeArr.length < 3"
          label="执行标准"
        >
          <el-input v-model="addTreeForm.standardName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<4" label="规格型号">
        <el-form-item
          v-show="addTreeForm.addTypeArr.length < 4"
          label="规格型号"
        >
          <el-input v-model="addTreeForm.specificationsName" />
        </el-form-item>
      </el-form>
@@ -137,99 +207,110 @@
</template>

<script>
import { getMaterialList, getProductList, getProductSonList,
  addMaterial, addStandards, addSpecifications
} from '@/api/standardLibrary'
import {
  getMaterialList,
  getProductList,
  getProductSonList,
  addMaterial,
  addStandards,
  addSpecifications,
  deleteListApi,
} from "@/api/standardLibrary";

import { selectproductModelApi } from "@/api/basicData/index";
export default {
  data() {
    return {
      deleteList: [],
      addTreeFormVisible: false,
      filterText: '',
      filterText: "",
      // æ ‡å‡†åº“bom树
      standardTree: [],
      // bom的,默认配置值
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
        children: "children",
        label: "name",
        value: "id",
      },
      // æŸ¥è¯¢æ¡ä»¶
      searchData: {
        keyword: ''
        keyword: "",
      },
      tableData: [
      ],
      tableData: [],
      oldtableData: [],
      // åˆ†é¡µå‚æ•°
      pageParams: {
        pageNo: 1,
        pageSize: 12,
        total: 0
        total: 0,
      },
      tablespecifications: [
      ],
      tablespecifications: [],
      // é€‰ä¸­çš„节点数据
      selectData: {},
      formTypeOptions: [],
      addTreeForm: {
        addTypeArr: []
      }
    }
        addTypeArr: [],
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getStandardTree()
    this.getStandardTree();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // èŽ·å–bom树的标准数据
    async getStandardTree() {
      const { data } = await getMaterialList()
      console.log(data)
      this.standardTree = data.map(item => {
        let name = null
      const { data } = await getMaterialList();
      console.log(data);
      this.standardTree = data.map((item) => {
        let name = null;
        switch (item.type) {
          case 1:
            name = '原材料'
            break
            name = "原材料";
            break;
          case 2:
            name = '半成品'
            break
            name = "半成品";
            break;
          case 3:
            name = '成品'
            break
            name = "成品";
            break;
        }
        return {
          ...item, id: item.type, name
        }
      })
      console.log(this.standardTree)
          ...item,
          id: item.type,
          name,
        };
      });
      console.log(this.standardTree);
      // formTypeOptions
      // é»˜è®¤ç¬¬ä¸€ä¸ªå››çº§èŠ‚点搜索，新增配置项
      const treeOptions = JSON.parse(JSON.stringify(this.standardTree))
      this.getDefault(treeOptions, 0)
      console.log(treeOptions)
      this.formTypeOptions = treeOptions
      const treeOptions = JSON.parse(JSON.stringify(this.standardTree));
      this.getDefault(treeOptions, 0);
      console.log(treeOptions);
      this.formTypeOptions = treeOptions;
      this.$nextTick().then(() => {
        const firstNode = document.querySelector('.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node')
        firstNode.click()
        const firstNode = document.querySelector(
          ".el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node"
        );
        firstNode.click();
        // console.log(firstNode)
      })
      });
    },
    getDefault(arr, index) {
      for (const item of arr) {
        if (item.children && item.children?.length > 0) {
        // æœ‰å­èŠ‚点
          this.getDefault(item.children, index + 1)
          this.getDefault(item.children, index + 1);
          if (index === 2) {
            item.children = null
            item.children = null;
          }
        }
        // else {
@@ -247,117 +328,138 @@
      // console.log('children' in data)
      // æ˜¯å­èŠ‚点
      if (node.level === 4) {
        // console.log(data, node)
        console.log(data, node);
        // å­˜ä¸‹é€‰ä¸­èŠ‚点
        this.selectData = data
        this.selectData = data;
        // eslint-disable-next-line prefer-const
        this.getTableByClick(data)
        this.getTableByClick(data);
      }
      if (!('children' in data)) {
        return
      if (!("children" in data)) {
        return;
      }
    },
    async getTableByClick(data) {
      // eslint-disable-next-line prefer-const
      let { data: { row, total }} = await getProductList({ pageNo: this.pageParams.pageNo, pageSize: this.pageParams.pageSize, specificationsId: data.id })
      let {
        data: { row, total },
      } = await getProductList({
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        specificationsId: data.id,
      });
      // console.log(row)
      this.pageParams.total = total
      row = row.map((item, index) => ({ ...item, index }))
      this.pageParams.total = total;
      row = row.map((item, index) => ({ ...item, index }));
      for (const item of row) {
        if (item.children) {
          const res = await getProductSonList({ fatherName: item.father })
          item.children = res.data
          item.id = item.father
          const res = await getProductSonList({ fatherName: item.father });
          item.children = res.data;
          item.id = item.father;
        }
      }
      this.tableData = row
      this.tableData = row;
    },
    specificationDetails(row) {
      // è·³è½¬äº§å“è§„格详情页
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.pageParams.pageSize = val
      this.getTableByClick(this.selectData)
      console.log(`每页 ${val} æ¡`);
      this.pageParams.pageSize = val;
      this.getTableByClick(this.selectData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.pageNo = val
      this.getTableByClick(this.selectData)
      console.log(`当前页: ${val}`);
      this.pageParams.pageNo = val;
      this.getTableByClick(this.selectData);
    },
    // æŸ¥è¯¢æŒ‰é’®
    filteredTableData() {
      this.oldtableData = this.tableData
      this.oldtableData = this.tableData;
      // æ ¹æ®è¾“入的关键字得到过滤后的数据，如果有就把过滤后的数据展示在页面上
      const filteredtabledata = this.tableData.filter(item => {
        return item.name.includes(this.searchData.keyword)
      })
      const filteredtabledata = this.tableData.filter((item) => {
        return item.name.includes(this.searchData.keyword);
      });
      // console.log('filteredtabledata', filteredtabledata)
      this.tableData = filteredtabledata
      this.tableData = filteredtabledata;
    },
    // é‡ç½®æŒ‰é’®
    resetBtn() {
      this.searchData.keyword = ''
      this.tableData = this.oldtableData
      this.searchData.keyword = "";
      this.tableData = this.oldtableData;
    },
    renderContent(h, { node, data, store }) {
      // console.log('data', data)
      // console.log('node', node)
      // åˆ¤æ–­æ˜¯å¦æ˜¯çˆ¶èŠ‚点或文件夹
      const isFolder = ('children') in data
      const isFolder = "children" in data;
      return (
        <span class='tree-node'>
        <span class="tree-node">
          {isFolder ? (
            <i
              class={node.expanded ? 'el-icon-folder-opened blue-folder' : 'el-icon-folder blue-folder'}
              class={
                node.expanded
                  ? "el-icon-folder-opened blue-folder"
                  : "el-icon-folder blue-folder"
              }
            ></i>
          ) : (
            <i class='el-icon-document blue-folder'></i>
            <i class="el-icon-document blue-folder"></i>
          )}
          <div class='tree-lable'>[{node.level}]  {data.name}</div>
          <div class="tree-lable">
            [{node.level}] {data.name}
          </div>
        </span>
      )
      );
    },
    async subAddTreeForm() {
      this.addTreeFormVisible = false
      console.log(this.addTreeForm.addTypeArr.length)
      let res = null
      this.addTreeFormVisible = false;
      console.log(this.addTreeForm.addTypeArr.length);
      let res = null;
      try {
        switch (this.addTreeForm.addTypeArr.length) {
          case 1:
            console.log(this.addTreeForm)
            res = await addMaterial({ ...this.addTreeForm, type: this.addTreeForm.addTypeArr.pop() })
            break
            console.log(this.addTreeForm);
            res = await addMaterial({
              ...this.addTreeForm,
              type: this.addTreeForm.addTypeArr.pop(),
            });
            break;
          case 2:
            console.log(this.addTreeForm)
            res = await addStandards({ ...this.addTreeForm, materialId: this.addTreeForm.addTypeArr.pop() })
            break
            console.log(this.addTreeForm);
            res = await addStandards({
              ...this.addTreeForm,
              materialId: this.addTreeForm.addTypeArr.pop(),
            });
            break;
          case 3:
            console.log(this.addTreeForm)
            res = await addSpecifications({ ...this.addTreeForm, standardId: this.addTreeForm.addTypeArr.pop() })
            break
            console.log(this.addTreeForm);
            res = await addSpecifications({
              ...this.addTreeForm,
              standardId: this.addTreeForm.addTypeArr.pop(),
            });
            break;
        }
      } catch (error) {
        this.$message.error('添加失败')
        this.$message.error("添加失败");
      }

      console.log(res)
      this.$message.success('添加成功')
      this.addTreeForm = {}
      this.getStandardTree()
      this.getTableByClick(this.selectData)
      console.log(res);
      this.$message.success("添加成功");
      this.addTreeForm = {};
      this.getStandardTree();
      this.getTableByClick(this.selectData);
    },
    changeCascader(data) {
      console.log(data)
      this.addTreeForm.addTypeArr = data
      console.log(data);
      this.addTreeForm.addTypeArr = data;
    },
    closeAddTreeForm() {
      this.addTreeForm = {
        addTypeArr: []
      }
      console.log(this.addTreeForm)
    }
        addTypeArr: [],
      };
      console.log(this.addTreeForm);
    },
    /** è¡¨æ ¼æŸè¡Œç‚¹å‡»äº‹ä»¶ */
    // handleRowClick(row, column, event) {
    //   // åˆ¤æ–­å½“前行是否有子集，若没有则结束处理
@@ -365,12 +467,137 @@
    //   if (!row.children) return
    //   this.$refs.tableData.toggleRowExpansion(row)
    // }
    selectProductModelTable() {
      selectproductModelApi(this.params).then((res) => {
        res.data.forEach((i) => {
          if (i.name === undefined) {
            i.name = i.children[0].name;
            i.unit = i.children[0].unit;
            i.id = i.children[0].id;
            i.edit = true;
            delete i.children;
          }
        });
        this.tableData = res.data;
        this.selectDataList();
      });
    },
    selectDataList() {
      this.tableData.forEach((a) => {
        a.code = "[1]";
        if (a.children != undefined) {
          a.children.forEach((b) => {
            b.code = "[2]";
          });
        }
      });
    },
    // è¡¨æ ¼æ ‘全部选中配置
    // å…¨é€‰/取消选操作
    selectAll(val) {
      this.isAllSelect = !this.isAllSelect;
      let data = this.tableData;
      this.toggleSelect(data, this.isAllSelect, "all");
      // è‡ªå®šä¹‰
      if (this.isAllSelect) {
        val.forEach((i) => {
          let isExist = false;
          this.deleteList.findIndex((c) => {
            if (c === i.id) {
              isExist = true;
            }
          });
          if (!isExist && i.id !== undefined) {
            this.deleteList.push(i.id);
          }
        });
      } else {
        this.deleteList.splice(0, this.deleteList.length);
      }
      // è‡ªå®šä¹‰ç»“束
    },
    //选择某行
    selectTr(selection, row) {
      this.$set(row, "isChecked", !row.isChecked);
      this.$nextTick(() => {
        this.isAllSelect = row.isChecked;
        this.toggleSelect(row, row.isChecked, "tr");
      });

      if (row.isChecked === true) {
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.push(i.id);
          });
        } else {
          this.deleteList.push(row.id);
        }
      } else if (row.isChecked === false) {
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.findIndex((c, index) => {
              if (c === i.id) {
                this.deleteList.splice(index, 1);
                return;
              }
            });
          });
        }
        this.deleteList.findIndex((c, index) => {
          if (c === row.id) {
            this.deleteList.splice(index, 1);
            return;
          }
        });
      }
    },
    //递归子级
    toggleSelect(data, flag, type) {
      if (type === "all") {
        if (data.length > 0) {
          data.forEach((item) => {
            this.toggleSelection(item, flag);
            if (item.children && item.children.length > 0) {
              this.toggleSelect(item.children, flag, type);
            }
          });
        }
      } else {
        if (data.children && data.children.length > 0) {
          data.children.forEach((item) => {
            item.isChecked = !item.isChecked;
            this.$refs.multipleTable.toggleRowSelection(item, flag);
            this.toggleSelect(item, flag, type);
          });
  }
}
    },
    //改变选中
    toggleSelection(row, flag) {
      this.$set(row, "isChecked", flag);
      this.$nextTick(() => {
        if (flag) {
          this.$refs.multipleTable.toggleRowSelection(row, flag);
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      });
    },
    // è¡¨æ ¼æ ‘全部选中配置  ç»“束
    deleteListClick() {
      deleteListApi(this.deleteList).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.selectProductModelTable();
      });
    },
  },
};
</script>

<style lang="scss" scoped>

// el-table表格对齐
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
  td:nth-child(2){
@@ -401,13 +628,14 @@
    .library-bom{
      // padding-right: 10px;
      width: 300px;
      // height: 100%;
      max-height: 100%;
      height: 100%;
      // max-height: 100%;
      // margin-right: 12px;
      // overflow-y: scroll;
      .el-tree {
        // margin-top: 
        width: 100%;
        overflow: scroll;
        ::v-deep .el-tree-node__content{
          height: 24px !important;
          font-size: 18px;
@@ -426,7 +654,7 @@
            padding-left: 8px;
          }
          .blue-folder{
            color: rgb(64, 158, 255)
            color: rgb(64, 158, 255);
          }
        }
      }
@@ -477,11 +705,11 @@
          flex-direction: column;
          justify-content: space-between;

          .el-table {
          // .el-table {
            // flex: 1;
            // max-height: 680px;
            // overflow-y: scroll;
          }
          // }
          >div:nth-child(3){
            // height: 20px;
            display: flex;