peisweb/src/views/fee-settings/SysParmSet.vue

<template>
  <div class="box">
    <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="sysParmTypesTree" :props="treeProps" highlight-current @node-click="nodeClick">
            <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 == null" />
                </span>
                <span :class="data.parentId == null ? 'maxtitle' : 'mintitle'">{{ node.label }}</span>
              </div>
            </span>
          </el-tree>
        </div>
      </div>
      <div :style="'margin-left: 15px;width:' + (window.pageWidth - 200 - 45) + 'px;'">
        <div>
          <el-table :data="sysParms" :height="window.pageHeight < 600 ? 418 : window.pageHeight - 162" size="small"
            :span-method="spanMethod" highlight-current-row border style="border-radius: 8px;">
            <el-table-column prop="sysParmId" label="参数ID" min-width="150" />
            <el-table-column prop="displayName" label="参数名称" min-width="150" />
            <el-table-column prop="medicalCenterId" label="体检中心" min-width="100">
              <template slot-scope="scope">
                <!--
                  <el-select
                    v-model="scope.row.medicalCenterId"
                    placeholder="请选择体检中心"
                    filterable
                    size="small"
                  >
                    <el-option
                      v-for="item in organization"
                      :key="item.id"
                      :label="item.displayName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  -->
                <div>{{ dddw(organization, 'id', scope.row.medicalCenterId, 'displayName') }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="sysParmValueName" label="参数值" min-width="80">
              <template slot-scope="scope">
                <el-input type="textarea" v-model="scope.row.sysParmValueName" :autosize="{ minRows: 1, maxRows: 100 }"
                  maxlength="100" size="small" />
              </template>
            </el-table-column>
            <el-table-column prop="valueRemark" label="备注" min-width="150">
              <template slot-scope="scope">
                <el-input type="textarea" v-model="scope.row.valueRemark" :autosize="{ minRows: 1, maxRows: 100 }"
                  maxlength="500" size="small" />
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="参数说明" min-width="150" />
          </el-table>
        </div>
        <div style="margin-top:15px; display: flex;justify-content:space-between;">
          <!--
            <div>
              <span>体检中心</span>
              <el-select
                v-model="organizationId"
                placeholder="请选择体检中心"
                style="margin-left: 15px"
                filterable
                size="small"
                @change="changeOrganization"
              >
                <el-option
                  v-for="item in organization"
                  :key="item.id"
                  :label="item.displayName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>           
            -->
          <div></div>
          <div>
            <el-button type="success" @click="btnSave" class="commonbutton">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { tcdate, objCopy, dddw } from "../../utlis/proFunc";
export default {
  components: {},
  data() {
    return {
      sysParmTypesTree: [], //参数类别树
      treeProps: {
        label: "displayName",
        value: "id",
        children: "treeChildren",
      },
      organization: [], //体检中心
      organizationId: "00000000-0000-0000-0000-000000000000",
      sysParmTypeId: "",
      spanRow: [],
      sysParms: [], //系统参数列表
    };
  },

  created() { },

  //挂载完成
  mounted() {
    this.getSysParmTypesTree();
    this.getOraniztion();
  },

  computed: {
    ...mapState(["window", "dict"]),
  },
  methods: {
    dddw,

    //获取组织体检中心数据
    getOraniztion() {
      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
        (res) => {
          if (res.code != -1) {
            this.organization = [
              {
                displayName: "公共参数",
                id: "00000000-0000-0000-0000-000000000000",
              },
              ...res.data,
            ];
          }
        }
      );
    },

    //获取系统参数类别树数据
    getSysParmTypesTree() {
      getapi("/api/app/sysparmtype/treelist").then((res) => {
        if (res.code != -1) {
          this.sysParmTypesTree = res.data;
          //console.log("res.data", res.data);
          tcdate(this.sysParmTypesTree);
        }
      });
    },

    nodeClick(data, node, self) {
      this.sysParmTypeId = data.id;
      this.getSysParms();
    },

    changeOrganization(v) {
      this.organizationId = v;
      this.getSysParms();
    },

    getSysParms() {
      let url = `/api/app/sysparm/getlistinsysparmvaluename?SysParmTypeId=${this.sysParmTypeId}`;
      if (this.organizationId) {
        url += `&medicalCenterId=${this.organizationId}`;
      }
      getapi(`${url}`).then((res) => {
        if (res.code != -1) {
          this.sysParms = res.data;
          this.spanRow = this.parseSpanRow(this.sysParms, 'sysParmId')
        }
      });
    },

    //行合并
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 5) {
        for (let i = 0; i < this.spanRow.length; i++) {
          if (rowIndex == this.spanRow[i].startRow) {
            return {
              rowspan: Number(this.spanRow[i].endRow - this.spanRow[i].startRow) + 1,
              colspan: 1
            };
          } else if (this.spanRow[i].startRow < rowIndex && rowIndex <= this.spanRow[i].endRow) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }

      // if (columnIndex == 3) {
      //   for (let i = 0; i < this.spanRow.length; i++) {
      //     if (rowIndex == this.spanRow[i].startRow) {
      //       return {
      //         rowspan: Number(this.spanRow[i].endRow - this.spanRow[i].startRow) + 1,
      //         colspan: 1
      //       };
      //     }
      //   }
      // }

      // if (columnIndex == 4) {
      //   for (let i = 0; i < this.spanRow.length; i++) {
      //     if (rowIndex == this.spanRow[i].startRow) {
      //       return {
      //         rowspan: Number(this.spanRow[i].endRow - this.spanRow[i].startRow) + 1,
      //         colspan: 1
      //       };
      //     } else if (this.spanRow[i].startRow < rowIndex && rowIndex <= this.spanRow[i].endRow) {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       }
      //     }
      //   }
      // }
    },

    //分析合并的行数据
    parseSpanRow(arrayData, key) {
      let spanRow = [];
      let preVal = '', curVal = '';
      let startRow = 0;
      for (let i = 0; i < arrayData.length; i++) {
        if (i == 0) {
          preVal = arrayData[i][key];
          curVal = arrayData[i][key];
        } else {
          curVal = arrayData[i][key];
          if (preVal !== curVal) {
            if (startRow !== i - 1) spanRow.push({ startRow, endRow: i - 1 });
            startRow = i;
            preVal = arrayData[i][key];
          }
          if (i == arrayData.length - 1 && preVal === curVal) {
            spanRow.push({ startRow, endRow: i });
          }
        }
      }
      return spanRow
    },

    btnSave() {

      let body = {
        sysParmTypeId: this.sysParmTypeId,
        details: []
      }

      if (this.sysParms.length < 1) return;

      this.sysParms.forEach((item) => {
        body.details.push({
          sysParmId: item.sysParmId,
          medicalCenterId: item.medicalCenterId,
          parmValue: item.sysParmValueName,
          remark: item.valueRemark,
        });
      });

      postapi("/api/app/sysparmvalue/updatesysparmvaluemany", body).then(
        (res) => {
          if (res.code != -1) {
            this.$message.success('操作成功！')
          }
        }
      );
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import '../../assets/css/global_card.css';
@import '../../assets/css/global_input.css';
@import '../../assets/css/global_table.css';
@import '../../assets/css/global.css';

.box {
  display: flex;
  flex-direction: column;
}
</style>