feat

pyt

2025-04-03 f516ebfa8ccf3a4286d5efc934812517e0e45b0b

feat

 src/components/Table/index.vue

@@ -16,6 +16,7 @@
</template>

<script>
import Vue from 'vue';
export default {
    props: {
        tableData: {
@@ -34,12 +35,11 @@
                    pageNum: 1
                }
            }
        }
    },
    computed: {
        height() {
            return this.$baseTableHeight()
        },
        height: {
            type: Number,
            default: () => Vue.prototype.$baseTableHeight()
        }
    },
    methods: {
        handleCurrentChange(page) {

 src/router/index.js

@@ -164,6 +164,14 @@
                },
                component: () => import("../views/dataManagement/confirmation-sheet"),
            },
            {
                path: "confirmation-sheet/add",
                name: "AddConfirmationSheet",
                meta: {
                    title: "检验方法确认单",
                },
                component: () => import("../views/dataManagement/confirmation-sheet/components/add.vue"),
            },
        ],
    },
    {

 src/views/dataManagement/confirmation-sheet/components/add.vue

New file
@@ -0,0 +1,370 @@
<template>
  <Card>
    <div class="header-title-left">
      <img src="@/assets/public/headercard.png" />
      <div>所属实验调度</div>
      <el-button @click="showScheduling = true" class="el-icon-plus" type="primary">
        选择实验调度</el-button>
    </div>
    <Table :tableData="tableData" :total="total" :height="null">
      <template>
        <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
        <el-table-column prop="planName" label="实验编号"></el-table-column>
        <el-table-column prop="planName" label="实验名称"></el-table-column>
        <el-table-column prop="stage" label="    通知时间"></el-table-column>
        <el-table-column prop="stage" label="    实验开始时间"></el-table-column>
        <el-table-column prop="stage" label="    实验结束时间"></el-table-column>
        <el-table-column prop="stage" label="    参加人员"></el-table-column>
        <el-table-column prop="creator" label="状态"></el-table-column>
      </template>
    </Table>
    <div class="header-title-left" style="margin-top: 60px;">
      <img src="@/assets/public/headercard.png" />
      <div>检测明细</div>
      <el-button @click="handleAddPlan" type="primary" class="el-icon-plus">
        新增检测项</el-button>
      <span>【注意：这里有多少个检测项 系统就会自动创建对应数量的《检测项的检验方法及数据记录》】</span>
    </div>
    <Table :tableData="tableData" :total="total" :height="null">
      <template>
        <el-table-column prop="planCode" label="序号"></el-table-column>
        <el-table-column prop="planName" label="检测项名称"></el-table-column>
        <el-table-column prop="planName" label="检测项编号"></el-table-column>
        <el-table-column prop="stage" label="    定性/定量"></el-table-column>
        <el-table-column prop="stage" label="    检测方法编号"></el-table-column>
        <el-table-column prop="stage" label="    检测方法"></el-table-column>
        <el-table-column prop="stage" label="    收样要求"></el-table-column>
        <el-table-column prop="creator" label="操作"></el-table-column>
      </template>
    </Table>
    <div class="btn_box flex">
      <el-button @click="$router.go(-1)">返回</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>

    </div>
    <experimentalScheduling :show="showScheduling"/>
  </Card>
</template>

<script>
import experimentalScheduling from './experimental-scheduling.vue';
export default {
  name: 'AddConfirmationSheet',
  components: {
    experimentalScheduling
  },
  props: {},
  data() {
    return {
      showScheduling: false,
      tableData: [],
      total: 0,
      form: {
        roleName: "",
        remark: "",
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      menu: [],
    };
  },
  computed: {
    height() {
      return this.$baseTableHeight()
    },
  },
  watch: {},
  created() {
    roleInfoFromUserId({ userId: 1 }).then(res => {
      if (this.$route.query.roleId) {
        getRoleInfo({ roleId: this.$route.query.roleId }).then(resp => {
          this.menu = this.setSelectedIds(res.data.data, resp.data.data.menus || []);
          this.form = {
            roleName: resp.data.data.roleName,
            remark: resp.data.data.remark,
            roleId: resp.data.data.roleId
          }
        })
      } else {
        this.menu = res.data.data
      }
    })
  },
  mounted() { },
  methods: {
    setSelectedIds(arr, selectKeyList) {
      function traverse(item) {
        item.selected = selectKeyList.includes(item.menuId);
        if (item.children && item.children.length > 0) {
          item.children.forEach(traverse);
        }
      }
      arr.forEach(traverse);
      return arr;
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.getSelectedIds(this.menu).length == 0) {
            this.msgwarning('请勾选操作权限')
            return
          }
          let obj = {
            ...this.form,
            menuIds: this.getSelectedIds(this.menu)
          }
          if (this.$route.query && this.$route.query.roleId) {
            obj.roleId = this.$route.query.roleId
            edit(obj).then(() => {
              this.msgsuccess('保存成功')
              this.$router.go(-1)
            })
          } else {
            add(obj).then(() => {
              this.msgsuccess('保存成功')
              this.form = {
                roleName: "",
                remark: "",
              }
              this.menu = []
              this.$router.go(-1)
            })
          }
        }
      })
    },
    getSelectedIds(arr) {
      let result = [];
      function traverse(item) {
        if (item.selected) {
          result.push(item.menuId);
        }
        if (item.children && item.children.length > 0) {
          for (let children of item.children) {
            traverse(children);
          }
        }
      }

      for (let item of arr) {
        traverse(item);
      }
      return result;
    },
    setCheckStatus1(id, status) { //点击第1级
      if (!status) {
        this.menu = this.menu.map(item => {
          if (item.menuId == id) {
            item.selected = status
            if (item.children.length > 0) {
              item.children = item.children.map(item1 => {
                item1.selected = status
                if (item1.children.length > 0) {
                  item1.children = item1.children.map(item2 => {
                    item2.selected = status
                    return { ...item2 }
                  })
                }
                return { ...item1 }
              })
            }
          }
          return { ...item }
        })
      } else {
        this.menu = this.menu.map(item => {
          if (item.menuId == id) {
            item.selected = true
          }
          return { ...item }
        })
      }
    },
    setCheckStatus2(id, status, aId) { //点击第2级
      this.menu = this.menu.map(item => {
        if (item.menuId == aId) {
          item.selected = true
          if (item.children.length > 0) {
            item.children = item.children.map(item1 => {
              if (item1.menuId == id) {
                item1.selected = status
              }
              return { ...item1 }
            })
          }
        }
        return { ...item }
      })
    },
    setCheckStatus3(id, status, bId, aId) {//点击第3级
      this.menu = this.menu.map(item => {
        if (item.menuId == aId) {
          item.selected = true
          if (item.children.length > 0) {
            item.children = item.children.map(item1 => {
              if (item1.menuId == bId) {
                item1.selected = true
                if (item1.children.length > 0) {
                  item1.children = item1.children.map(item2 => {
                    if (item2.menuId == id) {
                      item2.selected = status
                    }
                    return { ...item2 }
                  })
                }
              }
              return { ...item1 }
            })
          }
        }
        return { ...item }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.title_box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-weight: bold;

  div:first-child {
    width: 4px;
    height: 16px;
    background: #598DEC;
    margin-right: 8px;
  }
}

.no-data {
  height: 100%;
  background-color: #fff;
  border-radius: 0 0 6px 6px;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.btn_box {
  margin-top: 40px;
  text-align: center;

  button {
    width: 220px;
  }
}

.el-checkbox {
  display: flex;
  align-items: center;
}

.row,
.header {
  display: flex;
  align-items: center;
  border: 1px solid #e8e8e8;

  .w20 {
    width: 15%;
    padding: 8px 20px;
  }

  .sconed {
    flex: 1;

    .subpage {
      .title {
        border: 1px solid #e8e8e8;
        border-top: none;
        border-bottom: none;
      }

      .two {
        display: flex;
        align-items: center;
        border: 1px solid #e8e8e8;
        border-top: none;
        border-right: none;

        .left {
          width: 200px;
          padding: 13px 20px;
          border-right: 1px solid #e8e8e8;
        }

        .right {
          display: flex;
          flex: 1;

          div {
            padding: 13px 0 13px 20px;
          }
        }
      }

      .two:last-child {
        border-bottom: none;
      }

      .btns {
        display: flex;
        align-items: center;
        padding: 0 20px;
      }
    }
  }
}

.header {
  border-radius: 16px 16px 0 0;
  background-color: #FAFAFA;
  color: #909399;

  .subpage {
    display: flex;
  }

  .title {
    width: 200px;
    padding: 8px 20px;
  }
}

.header-title-left {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;

  img {
    width: 12px;
    height: 19px;
  }

  div {
    flex-shrink: 0;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    font-family: 'Source Han Sans CN Bold Bold';
  }

  span {
    color: rgb(254, 115, 115);
    font-size: 15px;
  }
}
</style>

 src/views/dataManagement/confirmation-sheet/components/experimental-scheduling.vue

New file
@@ -0,0 +1,72 @@
<template>
    <div>
        <el-dialog title="选择项目组" :visible.sync="show" width="80%">
            <TableCustom :queryForm="form" :tableData="tableData" :total="total">
                <template #search>
                    <el-form :model="form" label-width="140px" inline>
                        <el-form-item label="所属项目课题方案：">
                            <el-input v-model="form.planName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="实验编号：">
                            <el-input v-model="form.planCode" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="创建人：">
                            <el-input v-model="form.creator" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="通知时间：">
                            <el-date-picker v-model="form.createTime" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="状态：">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option label="待确认" value="待确认"></el-option>
                                <el-option label="已确认" value="已确认"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="default" @click="resetForm">重置</el-button>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                </template>
                
                <template #table>
                    <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
                    <el-table-column prop="planName" label="实验编号"></el-table-column>
                    <el-table-column prop="planName" label="实验名称"></el-table-column>
                    <el-table-column prop="stage" label="提交时间"></el-table-column>
                    <el-table-column prop="creator" label="状态"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <!-- 撤销、详情、编辑、删除 -->
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleDetail(scope.row)">撤销</el-button>
                            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                            <el-button type="text" @click="handleDetail(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDetail(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </template>
            </TableCustom>
            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="show = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['show'],
    data() {
        return {
            form: {},
            tableData: [],
            totol: 0
        }
    }
}
</script>

<style></style>

 src/views/dataManagement/confirmation-sheet/index.vue

@@ -116,7 +116,7 @@
        },
        handleAddPlan() {
            this.$router.push({
                path: "/dataManagement/addPlan",
                path: "/dataManagement/confirmation-sheet/add",
            });
        },
        handleApprove(row) {