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

<template>
  <div>
    <el-card>
      <div style="display: flex">
        <div class="leftTree">
          <el-tree :data="sysParmTypesTree" :props="treeProps" @node-click="nodeClick" />
        </div>
        <div class="midBlock">
          <div style="display: flex">
            <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 style="display: flex">
              <el-color-picker v-model="color16" @change="chooseColor" />
              <el-input v-model="color10" @input="inputColor" />
            </div>
            <div style="margin-left: 30px">
              <el-button type="success" @click="save">保存</el-button>
            </div>
          </div>
          <div style="margin-top: 2px">
            <el-table :data="sysParms" border :height="window.pageHeight < 600 ? 420 : window.pageHeight - 190"
              size="small" highlight-current-row>
              <el-table-column prop="id" label="参数ID" />
              <el-table-column prop="displayName" label="参数名称" width="120" />
              <el-table-column prop="organizationUnitId" label="体检中心">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.organizationUnitId" placeholder="请选择体检中心" filterable size="small">
                    <el-option v-for="item in organization" :key="item.id" :label="item.displayName" :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="sysParmValueName" label="参数值">
                <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="备注">
                <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="参数说明" />
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { tcdate, objCopy } from "../../utlis/proFunc";

export default {
  components: {},
  data() {
    return {
      sysParmTypesTree: [], //参数类别树
      treeProps: {
        label: "displayName",
        value: "id",
        children: "treeChildren",
      },
      organization: [], //体检中心
      organizationId: "00000000-0000-0000-0000-000000000000",
      sysParmTypeId: "",
      sysParms: [], //系统参数列表
      color16: "#409EFF",
      color10: 1089274,
    };
  },

  created() { },

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

  computed: {
    ...mapState(["window", "dict"]),
  },
  methods: {
    chooseColor(v) {
      this.color10 = eval(v.replace("#", "0x"));
    },
    inputColor(v) {
      this.color10 = Number(v);
      let temp = "000000" + this.color10.toString(16);
      this.color16 = "#" + temp.substring(temp.length - 6, temp.length);
    },

    //获取组织体检中心数据
    getOraniztion() {
      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
        (res) => {
          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 += `&OrganizationUnitId=${this.organizationId}`;
      }
      getapi(`${url}`).then((res) => {
        if (res.code != -1) {
          this.sysParms = res.data;
        }
      });
    },

    save() {
      let body = [];
      if (this.sysParms.length < 1) return;
      this.sysParms.forEach((item) => {
        body.push({
          sysParmId: item.id,
          organizationUnitId: item.organizationUnitId,
          parmValue: item.sysParmValueName,
          remark: item.valueRemark,
        });
      });

      postapi("/api/app/sysparmvalue/updatesysparmvaluemany", body).then(
        (res) => {
          if (res.code != -1) {
            this.$message.success("操作成功！");
          }
        }
      );
    },
  },
};
</script>
<style scoped>
.leftTree {
  overflow: scroll;
  border: 1px solid;
  width: 200px;
  height: v-bind("(window.pageHeight < 600 ? 450 : window.pageHeight - 150) + 'px'"
    );
}

.midBlock {
  margin-left: 5px;
  width: v-bind("(window.pageWidth < 500 ? 300 : window.pageWidth - 270) + 'px'"
    );
}
</style>