order-ui-pc/src/views/system/parameter/index.vue

<template>
  <div class="parameter pagePadding">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <el-table
        :data="tableData"
        stripe
        v-loading="loading"
        border
        :size="size"
        style="width: 100%"
      >
        <el-table-column
          prop="field_name"
          label="参数名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="powers.some((item) => item == '008')"
          label="字段值"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.values" placeholder="请输入">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          prop="values"
          label="字段值"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="powers.some((item) => item == '008')"
          prop="expiretime"
          label="生效时间"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.expiretime"
              style="width: 100%"
              :picker-options="pickerOptions"
              type="datetime"
              placeholder="选择日期时间"
              default-time="00:00:00"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          prop="expiretime"
          label="生效时间"
          show-overflow-tooltip
          align="center"
        ></el-table-column>

        <!-- <el-table-column label="状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '1'"
              type="success"
              :class="{ 'hover-tag': powers.some((item) => item == '004') }"
              :size="tablebtnSize"
              @click="
                statusConfirm(
                  scope.row.id,
                  scope.row.status,
                  powers.some((item) => item == '004')
                )
              "
            >
              <i
                class="el-icon-thumb"
                v-if="powers.some((item) => item == '004')"
                style="margin-right: 1px"
              ></i>
              启用</el-tag
            >
            <el-tag
              v-else
              :class="{ 'hover-tag': powers.some((item) => item == '004') }"
              :size="tablebtnSize"
              type="warning"
              @click="
                statusConfirm(
                  scope.row.id,
                  scope.row.status,
                  powers.some((item) => item == '004')
                )
              "
            >
              <i
                class="el-icon-thumb"
                v-if="powers.some((item) => item == '004')"
                style="margin-right: 1px"
              ></i>
              禁用</el-tag
            >
          </template>
        </el-table-column> -->

        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-link
              v-if="powers.some((item) => item == '008')"
              type="primary"
              style="margin: 0 4px"
              :underline="false"
              :size="tablebtnSize"
              @click="onSubmit(scope.row)"
            >
              提交
            </el-link>
            <!-- <el-link
              v-if="powers.some((item) => item == '007')"
              type="primary"
              style="margin: 0 4px"
              :underline="false"
              :size="tablebtnSize"
              @click="openModal(scope.row.id)"
            >
              详情
            </el-link> -->
          </template>
        </el-table-column>
      </el-table>
      <add-edit
        :showModel="showModel"
        :id="modelId"
        @cancel="showModel = false"
      />
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/system/parameter";
import { parseTime } from "@/utils";
import addEdit from "./addEdit";
import resToken from "@/mixins/resToken";
export default {
  name: "Parameter",
  components: {
    addEdit,
  },
  mixins: [resToken],
  computed: {
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "parameter"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      pickerOptions: {
        // disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,
        disabledDate(time) {
          let date = new Date().valueOf();
          const one = 1000 * 60 * 60 * 24;
          date = parseInt(date / one) * one;
          return time.getTime() <= date;
        },
      },
      showModel: false,
      loading: false,
      modelId: 0,
      tableData: [],
    };
  },
  mounted() {
    this.getInfor();
  },
  methods: {
    async onSubmit(row) {
      if (!this.loading) {
        this.loading = true;
        const obj = {
          fields_name: row.field_name,
          value: row.values,
          expiretime: row.expiretime,
          fields: row.fields,
        };
        obj.expiretime = parseTime(new Date(obj.expiretime).valueOf());
        const res = await asyncRequest.update(obj);
        if (res && res.code === 0) {
          this.$notify.success({
            title: res.message,
            message: "",
          });
          await this.getInfor();
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
        this.loading = false;
      }
    },

    async getInfor() {
      this.loading = true;
      const res = await asyncRequest.list({});
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },
    openModal(id) {
      this.showModel = true;
      this.modelId = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.parameter {
  background: rgba(242, 242, 242, 1);
  min-height: 100%;
  width: 100%;
  height: 100%;
  // background-color: $bg;
  overflow: hidden;

  // position: absolute;
  z-index: 2;
  background: #fff;
  .change {
    .title {
      border-width: 0px;
      width: 100%;
      height: 100px;
      // display: flex;
      font-weight: 400;
      font-style: normal;
      font-size: 22px;
      text-align: left;
      padding: 0;
      padding: 60px 0 0 100px;
      width: 100%;
      box-sizing: border-box;
    }
  }
}
</style>