From 9993b1fbb97dbc48c29dda47ffa897a11d46ba55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BD=97=E6=96=8C=E6=9D=B0?= <>
Date: Sat, 21 Sep 2024 14:54:17 +0800
Subject: [PATCH] ui

---
 src/router/index.js               |   6 +
 src/views/fee-settings/Device.vue | 683 ++++++++++++++++++++++++++++++
 2 files changed, 689 insertions(+)
 create mode 100644 src/views/fee-settings/Device.vue

diff --git a/src/router/index.js b/src/router/index.js
index a83b470..7352401 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -254,6 +254,12 @@ const routes = [{
                 component: () =>
                     import ("../views/fee-settings/CriticalValue.vue"),
             },
+            {
+                path: "/device",
+                name: '仪器设备',
+                component: () =>
+                    import ("../views/fee-settings/Device.vue"),
+            },
             //----------------------  收费设置 start ----------------------
             {
                 path: "/invoice-item-type",
diff --git a/src/views/fee-settings/Device.vue b/src/views/fee-settings/Device.vue
new file mode 100644
index 0000000..c291d96
--- /dev/null
+++ b/src/views/fee-settings/Device.vue
@@ -0,0 +1,683 @@
+<template>
+  <div class="box">
+    <div>
+      <div class="middlebox">
+        <div class="contenttitle">
+          基础资料 /
+          <span class="contenttitleBold">仪器设备</span>
+        </div>
+      </div>
+      <div style="display: flex; margin-top: 7px">
+        <div
+          :style="
+            'width: 208px;overflow: scroll;height:' +
+            (window.pageHeight < 600 ? 480 : window.pageHeight - 100) +
+            'px;background-color: #fff; border-radius: 8px'
+          "
+        >
+          <div style="margin-top: 10px">
+            <el-tree
+              :data="category"
+              :props="treeprops"
+              @node-click="treeclick"
+              node-key="id"
+              ref="itemType"
+              highlight-current
+              auto-expand-parent
+            >
+              <span class="custom-tree-node" slot-scope="{ node, data }">
+                <div>
+                  <span class="treeicons">
+                    <!-- <i
+                        class="el-icon-document-remove"
+                        v-if="data.parentId == null"
+                      ></i> -->
+                    <img
+                      style="width: 20px; height: 20px; vertical-align: sub"
+                      src="@/assets/images/order.png"
+                      v-if="!data.parentId"
+                    />
+                  </span>
+                  <span
+                    :class="!data.parentId ? 'maxtitle' : 'mintitle'"
+                    >{{ node.label }}</span
+                  >
+                </div>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+        <div style="display: block">
+          <div style="margin-left: 15px; display: flex">
+            <div
+              :style="
+                'width:' +
+                (window.pageWidth - 200 - 110 - 50 - 14) +
+                'px;padding: 15px;background-color: #fff;border-radius: 8px;'
+              "
+            >
+              <div id="printTest">
+                <el-table
+                  :data="tableData"
+                  row-key="id"
+                  class="el-table__body-wrapper tbody"
+                  @row-click="rowick"
+                  highlight-current-row
+                  :height="
+                    window.pageHeight < 600 ? 450 : window.pageHeight - 130
+                  "
+                  ref="tableData"
+                >
+                  <el-table-column prop="id" label="编号" width="300">
+                  </el-table-column>
+                  <el-table-column prop="displayName" label="名称" width="">
+                  </el-table-column>
+                  <el-table-column
+                    prop="deviceProtocolFlag"
+                    label="设备协议"
+                    width=""
+                  >
+                  <template slot-scope="scope">
+            <div>
+              {{ dddw(deviceProtocolFlag, "id", scope.row.deviceProtocolFlag, "displayName") }}
+            </div>
+          </template>
+                  </el-table-column>
+                  <el-table-column prop="aeTitle" label="AETitle" width="" show-overflow-tooltip>
+                  </el-table-column>
+                  <el-table-column prop="creatorName" label="创建者" width="">
+                  </el-table-column>
+                  <el-table-column
+                    prop="lastModifierName"
+                    label="修改者"
+                    width=""
+                  >
+                  </el-table-column>
+                  <!-- <el-table-column prop="simpleCode" label="简称" width="180">
+        </el-table-column> -->
+                  <el-table-column
+                    prop="creationTime"
+                    label="创建时间"
+                    width="200"
+                  >
+                    <template slot-scope="scope">
+                      {{ scope.row.creationTime | dateFormat }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="lastModificationTime"
+                    label="修改时间"
+                    width="200"
+                  >
+                    <template slot-scope="scope">
+                      {{ scope.row.lastModificationTime | dateFormat }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" width="" align="center">
+                    <template>
+                      <el-tag
+                        class="move"
+                        style="
+                          cursor: move;
+                          background-color: rgb(245, 245, 245);
+                          border: none;
+                        "
+                        draggable="true"
+                      >
+                        <i
+                          class="el-icon-d-caret"
+                          style="
+                            width: 1rem;
+                            height: 1rem;
+                            color: rgb(113, 113, 113);
+                          "
+                        ></i>
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+            <!-- 按钮区域 -->
+            <div style="margin-left: 10px">
+              <el-button type="" @click="add" class="commonbutton"
+                >新增</el-button
+              >
+              <div style="margin-top: 10px">
+                <el-button type="" @click="edlits" class="commonbutton"
+                  >编辑</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button type="" @click="deleteid" class="deleteButton"
+                  >删除</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button type="" @click="topping" class="commonbutton"
+                  >置顶</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button type="" @click="toppings" class="commonbutton"
+                  >置底</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button
+                  type=""
+                  :disabled="isshow"
+                  @click="assertion"
+                  class="commonbutton"
+                  >排序</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button
+                  type=""
+                  :disabled="isshow"
+                  @click="cancellation"
+                  class="commonbutton"
+                  >取消</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="cancelorconfirm"></div> -->
+      <!-- 新增或者编辑弹框 -->
+
+      <el-dialog
+        :title="title == 1 ? '新增' : '修改'"
+        :visible.sync="dialogVisible"
+        width="75%"
+        :close-on-click-modal="false"
+      >
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="编号">
+                <el-input
+                  v-model="form.id"
+                  style="width: 65%"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="仪器类别">
+                <el-select
+                  v-model="form.deviceTypeId"
+                  placeholder="请选择"
+                  size="small"
+                >
+                  <el-option
+                    v-for="item in category"
+                    :key="item.id"
+                    :label="item.displayName"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="名称">
+                <el-input
+                  ref="refinput"
+                  v-model="form.displayName"
+                  style="width: 65%"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="设备协议">
+                <el-select
+                  v-model="form.deviceProtocolFlag"
+                  placeholder="设备协议"
+                  size="small"
+                >
+                  <el-option v-for="item in deviceProtocolFlag"
+                    :key="item.id"
+                    :label="item.displayName"
+                    :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="AETitle">
+                <!-- <el-input
+                    v-model="form.parmValue"
+                    size="small"
+                  ></el-input> -->
+                <el-input
+                  v-model="form.aeTitle"
+                  :disabled="form.deviceProtocolFlag!='1'"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-divider></el-divider>
+            <el-col :span="4" style="margin-left: 15px">
+              <el-form-item label="创建者">
+                <el-input
+                  v-model="form.creatorName"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="创建时间">
+                <el-input
+                  :value="form.creationTime | dateFormat"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="修改者">
+                <el-input
+                  v-model="form.lastModifierName"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="修改时间">
+                <el-input
+                  style="width: 85%"
+                  :value="form.lastModificationTime | dateFormat"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false" class="difference"
+            >取 消</el-button
+          >
+          <el-button type="primary" @click="addoredit" class="commonbutton"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import Sortable from "sortablejs";
+import { mapState } from "vuex";
+import { instrumentlist } from "../../request/systemapi";
+import { deletapi, getapi, postapi, putapi } from "@/api/api";
+import {dddw } from "../../utlis/proFunc";
+export default {
+  data() {
+    return {
+      isshow: true,
+      dialogVisible: false,
+      title: 1,
+      form: {
+        displayName: "",
+        deviceTypeId: "",
+        deviceProtocolFlag:"",
+        aeTitle:""
+      },
+      tableData: [],
+      initTableData: [],
+      curRow: {},
+      department: "",
+      quckDepartment: [],
+      category: [],
+      treeprops: {
+        label: "displayName",
+        value: "id",
+        children: "treeChildren",
+      }, //左侧树形结构需要的数据
+      deviceTypeId:"",
+      deviceProtocolFlag:[{
+        id:"0",
+        displayName:"视频采集图片和导入图片"
+      },{
+        id:"1",
+        displayName:"dicom"
+      }]
+    };
+  },
+  created() {
+    // this.getlist();
+    this.getcategory();
+  },
+  mounted() {
+    this.rowDrop();
+  },
+  computed: {
+    ...mapState(["window"]),
+  },
+  methods: {
+    dddw,
+    getcategory() {
+      instrumentlist().then((res) => {
+        if (res.code != -1) {
+          this.category = [...res.data];
+        }
+      });
+    },
+    //点击列表通过id查询
+    rowick(row) {
+      this.curRow = { ...row };
+      // listsid(row.id).then((res) => {
+      //   if(res.code!=-1){
+      //     this.curRow = { ...res.data };
+      //   }
+      //   // this.form = res.data;
+      // });
+    },
+    remoteMethodes(keyWords) {
+      if (keyWords) {
+        this.quckDepartment = [];
+        this.initTableData.forEach((item) => {
+          if (
+            item.displayName.toLowerCase().indexOf(keyWords.toLowerCase()) >
+              -1 ||
+            item.simpleCode.toLowerCase().indexOf(keyWords.toLowerCase()) > -1
+            // || item.shortName.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1
+          ) {
+            this.quckDepartment.push(item);
+          }
+        });
+      } else {
+        this.quckDepartment = [...this.initTableData];
+      }
+    },
+    quckDepartments(e) {
+      if (e) {
+        this.tableData.forEach((item, index) => {
+          if (e == item.id) {
+            this.$refs["tableData"].setCurrentRow(item);
+            this.rowick(item);
+            this.searchup(item, index);
+          }
+        });
+      } else {
+        this.remoteMethodes();
+      }
+    },
+    searchup(data, index) {
+      // if (index > 3) {
+        const targetTop = this.$refs["tableData"].$el
+          .querySelectorAll(".el-table__body tr")
+          [index - 1].getBoundingClientRect().top;
+        const containerTop = this.$refs["tableData"].$el
+          .querySelector(".el-table__body")
+          .getBoundingClientRect().top;
+        const scrollParent = this.$refs["tableData"].$el.querySelector(
+          ".el-table__body-wrapper"
+        );
+        scrollParent.scrollTop = targetTop - containerTop;
+      // }
+    },
+    treeclick(data) {
+      this.deviceTypeId = data.id;
+      postapi("/api/app/Device/GetList",{
+        deviceTypeId:this.deviceTypeId
+      }).then((res) => {
+        if (res.code != -1) {
+         this.initTableData = [...res.data];
+          this.tableData = res.data;
+        }
+      });
+      this.curRow=this.$options.data().curRow
+    },
+    cancellation() {
+      this.$message.info("取消操作");
+      this.isshow = true;
+      this.getlist();
+    },
+    //确定排序
+    assertion() {
+      const result = [];
+      this.tableData.forEach((item, index) => {
+        // index 从0开始的， 你的displayOrder从大到小排
+        // const currentDisplayOrder = this.tableData.length -1
+        // const currentDisplayOrder = this.initTableData[index].displayOrder;
+        // if (item.displayOrder != currentDisplayOrder) {
+        // 如果它的displayOrder和它当前所在的位置不同代表挪动过位置
+        result.push({ id: item.id, displayOrder: index + 1 });
+        // }
+      });
+      postapi("/api/app/Device/UpdateSortMany", { itemList: result }).then(
+        (res) => {
+          if (res.code != -1) {
+            this.getlist();
+            this.isshow = true;
+            //this.$message.success("操作成功");
+          }
+        }
+      );
+    },
+    //初始化
+    rowDrop() {
+      this.$nextTick(() => {
+        const tbody = document.querySelector(".el-table__body-wrapper tbody");
+        const _this = this;
+        Sortable.create(tbody, {
+          handle: ".move",
+          animation: 300,
+          // 指定父元素下可被拖拽的子元素
+          // draggable: ".module-manager .el-table__row",
+          onChoose({ oldIndex }) {
+            _this.$refs["tableData"].setCurrentRow(_this.tableData[oldIndex]);
+            _this.rowick(_this.tableData[oldIndex]);
+          },
+          onEnd({ newIndex, oldIndex }) {
+            // console.log(arr);
+            _this.isshow = false;
+            const currRow = _this.tableData.splice(oldIndex, 1)[0];
+            _this.tableData.splice(newIndex, 0, currRow);
+            _this.tableData.map((item, index) => {
+              if (index == newIndex && index == oldIndex) {
+                // console.log(item, "新数据");
+              } else if (index == oldIndex) {
+              } else if (index == newIndex) {
+              }
+            });
+          },
+        });
+      });
+    },
+    //置底置顶
+    topping() {
+      this.form = { ...this.curRow };
+      if (this.form.id == undefined) {
+        this.$message.warning("请选择操作的数据");
+      } else {
+        postapi("/api/app/Device/UpdateManySort",{
+            deviceId:this.curRow.id,
+            sortType:1
+        }).then((res) => {
+          if (res.code != -1) {
+            this.getlist();
+            //this.$message.success("操作成功");
+          }
+        });
+      }
+    },
+    toppings() {
+      this.form = { ...this.curRow };
+      if (this.form.id == undefined) {
+        this.$message.warning("请选择操作的数据");
+      } else {
+        postapi("/api/app/Device/UpdateManySort",{
+            deviceId:this.curRow.id,
+            sortType:2
+        }).then((res) => {
+          if (res.code != -1) {
+            this.getlist();
+            //this.$message.success("操作成功");
+          }
+        });
+      }
+    },
+    //删除
+    deleteid(row) {
+      this.form = { ...this.curRow };
+      if (this.form.id == undefined) {
+        this.$message.warning("请选择删除的数据");
+      } else {
+        this.$confirm("是否确认删除,是否继续", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+          cancelButtonClass: "difference",
+          confirmButtonClass: "commonbutton",
+        })
+          .then(() => {
+            postapi("/api/app/Device/Delete",{
+                deviceId:this.curRow.id
+            }).then((res) => {
+              if (res.code != -1) {
+                this.curRow=this.$options.data().curRow
+                this.getlist();
+                //this.$message.success("删除成功");
+              }
+            });
+          })
+          .catch(() => {});
+      }
+    },
+    //edlits编辑弹框
+    edlits(row) {
+      this.form = { ...this.curRow };
+      if (this.form.id == undefined) {
+        this.$message.warning("请选择操作的数据");
+      } else {
+        this.title = 2;
+        this.dialogVisible = true;
+        postapi("/api/app/Device/Get",{
+            deviceId:this.form.id
+        }).then((res) => {
+          if (res.code != -1) {
+            this.form = res.data;
+          }
+        });
+      }
+    },
+    //确定新增或者修改
+    addoredit() {
+      if (this.form.displayName == "") {
+        this.$message.warning("请输入名称");
+      } else if (this.form.deviceTypeId == "") {
+        this.$message.warning("请选择仪器类别");
+      } else if (this.form.deviceProtocolFlag == "") {
+        this.$message.warning("请选择设备协议");
+      }else {
+              if (this.title == 1) {
+          postapi("/api/app/Device/Create", {
+            displayName: this.form.displayName,
+            deviceTypeId: this.form.deviceTypeId,
+            deviceProtocolFlag:this.form.deviceProtocolFlag,
+            aeTitle:this.form.aeTitle
+          }).then((res) => {
+            // this.form.displayName = "";
+            if (res.code != -1) {
+              this.getlist();
+              this.dialogVisible = false;
+              //this.$message.success("新增成功");
+            }
+          });
+      } else if (this.title == 2) {
+          postapi("/api/app/Device/Update", {
+            deviceId:this.form.id,
+            displayName: this.form.displayName,
+            deviceTypeId: this.form.deviceTypeId,
+            deviceProtocolFlag:this.form.deviceProtocolFlag,
+            aeTitle:this.form.aeTitle
+          }).then((res) => {
+            if (res.code != -1) {
+              this.getlist();
+              this.dialogVisible = false;
+              //this.$message.success("修改成功");
+            }
+          });
+      }
+      }
+    },
+    //新增弹框
+    add() {
+      if (this.deviceTypeId == undefined || this.deviceTypeId == "") {
+        this.$message.warning("请选择仪器类别");
+      }else{
+              this.dialogVisible = true;
+      this.title = 1;
+      this.form=this.$options.data().form
+      this.form.deviceTypeId = this.deviceTypeId;
+      this.$nextTick(() => {
+        this.$refs.refinput.focus();
+      });
+      }
+    },
+    //
+    getlist() {
+      postapi("/api/app/Device/GetList",{
+        deviceTypeId:this.deviceTypeId
+      }).then((res) => {
+        if (res.code != -1) {
+         this.initTableData = [...res.data];
+          this.tableData = res.data;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+@import "../../assets/css/global_button.css";
+@import "../../assets/css/global_dialog.css";
+@import "../../assets/css/global_table.css";
+@import "../../assets/css/global_form.css";
+@import "../../assets/css/global_input.css";
+@import "../../assets/css/global.css";
+.box {
+  display: flex;
+  flex-direction: column;
+}
+:deep .el-form-item {
+  margin-bottom: 14px;
+}
+/* el-dialog的头部样式 */
+:deep .el-dialog__header {
+  padding: 11px 20px 11px;
+}
+/* el-dialog的主体样式 */
+:deep .el-dialog__body {
+  padding: 0px 20px 0px;
+}
+/* el-divider样式 */
+:deep .el-divider--horizontal {
+  margin: 0px 0 12px;
+}
+/* el-dialog的底部样式 */
+:deep .el-dialog__footer {
+  padding: 0px 20px 14px;
+}
+.seachinput {
+  width: 250px;
+  margin-right: 110px;
+}
+:deep .seachinput .el-select {
+  width: 100%;
+}
+:deep .el-tree-node>.el-tree-node__children{
+  overflow: visible;
+}
+</style>