zc_saas_admin/src/views/Marketing/clientSetup/pageSet/page1.vue

<template>
  <div id="">
    <el-table :data="tableData" style="margin-top: 10px" border>
      <el-table-column
        v-for="(item, index) in tableSet"
        :width="item.width"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="item.scope === 'input'">
            <el-input-number
              @blur="changeVal(scope.row)"
              v-model="scope.row[item.prop]"
              :controls="false"
              :min="0"
              :precision="0"
              style="width: 50%"
            ></el-input-number>
          </div>
          <div v-else-if="item.scope === 'inputPath'">
            <el-input
              v-model="scope.row[item.prop]"
              style="width: 50%"
            ></el-input>
          </div>
          <div v-else-if="item.scope === 'status'" class="disflex_sty">
            <el-switch
              :size="size"
              v-if="scope.row['name'] !== '首页'"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row[item.prop]"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
            <span style="margin-left: 14px">
              {{
                scope.row[item.prop] === 1
                  ? "开启"
                  : scope.row[item.prop] === 0
                  ? "关闭"
                  : "未知"
              }}
            </span>
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template></el-table-column
      >
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { listConfig, updateConfig } from "@/api/system/config";
export default {
  data() {
    return {
      initData: {
        configValue: {},
      },
      tableData: [],
      tableSet: [
        {
          label: "排序",
          prop: "sort",
          scope: "input",
        },
        {
          label: "导航菜单名称",
          prop: "name",
          scope: "inputPath",
        },
        {
          label: "路由地址",
          prop: "path",
          scope: "inputPath",
        },
        {
          label: "状态",
          prop: "status",
          scope: "status",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      listConfig({ configKey: "client.config" }).then((res) => {
        if (res.rows.length) {
          this.initData = res.rows[0];
          let configValue = JSON.parse(res.rows[0].configValue) || {};
          this.tableData = configValue.nav || [];
        }
      });
    },
    changeVal(row) {
      if (!row.sort && row.sort !== 0) {
        this.$message.warning("检测到你没有赋值或赋值异常，已自动赋值为0");
        row.sort = 0;
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          if (
            this.tableData[i].name !== row.name &&
            this.tableData[i].sort == row.sort
          ) {
            this.$message.warning("检测到重复值，已自动赋值为0");
            row.sort = 0;
          }
        }
      }
      this.tableData.sort(this.sort);
    },
    submit() {
      let initData = JSON.parse(JSON.stringify(this.initData));
      initData.configValue = JSON.parse(initData.configValue);
      initData.configValue["nav"] = this.tableData;
      initData.configValue = JSON.stringify(initData.configValue);
      updateConfig(initData).then((res) => {
        this.$message.success("保存成功");
        this.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>