erp_ehsd/src/views/xiaoman/config.vue

<template>
  <div class="tenant">
    <div class="content">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        :selectConfig="selectConfig"
        highlight-current-row
        :action-list="[]"
        @get-list="getList"
      >
      </byTable>
    </div>
  </div>

  <el-dialog title="修改用户名密码" v-if="editShow" v-model="editShow" width="500" destroy-on-close>
    <byForm :formConfig="configDataForm" :formOption="formOption" v-model="configData.data" :rules="rulesFollow" ref="configHandle">
    </byForm>
    <template #footer>
      <el-button @click="editShow = false" size="large">取 消</el-button>
      <el-button type="primary" @click="submitForm()" size="large">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref } from "vue";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import moment from "moment";
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();


let rulesFollow = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
});
const configHandle = ref(null);
let configData = reactive({
  data: {},
});

let editShow = ref(false);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});

const configDataForm = computed(() => {
  return [
    {
      type: "input",
      label: "用户名",
      prop: "username",
      itemWidth: 100,
    },
    {
      type: "input",
      label: "密码",
      prop: "password",
      itemWidth: 100,
    },
  ];
});



const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    status: "",
    sellCorporationId: "",
  },
});
const loading = ref(false);
const selectConfig = computed(() => {
  return [
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "小满CRM账号",
        prop: "username",
        width: 200,
      },
    },
    {
      attrs: {
        label: "小满CRM账号密码",
        prop: "password",
        "min-width": 220,
      },
    },
    {
      attrs: {
        label: "client_id",
        prop: "clientId",
        width: 160,
      },
    },
    {
      attrs: {
        label: "client_secret",
        prop: "clientSecret",
        width: 160,
      },
    },
    {
      attrs: {
        label: "access_token",
        prop: "accessToken",
        "min-width": 220,
      },
    },
    {
      attrs: {
        label: "token过期时间",
        prop: "expireTime",
        width: 180,
      },
    },
    {
      attrs: {
        label: "最后一次获取token时间",
        prop: "lastTokenTime",
        width: 180,
      },
    },
    {
      attrs: {
          label: "操作",
          width: 180,
          align: "center",
          fixed: "right",
      },
        renderHTML(row) {
          return [
            {
              attrs: {
                  label: "修改",
                  type: "primary",
                  text: true,
              },
              el: "button",
              click() {
                editConfig(row);
              },
            },
          ];
        },
    },
  ];
});



const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/xiaomanConfig/page", sourceList.value.pagination).then((res) => {
    res.rows.forEach((x) => {
      x.addTagShow = false;
      if (x.tag) {
        x.tags = x.tag.split(",");
      } else {
        x.tags = [];
      }
    });
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};

const editConfig = (item) => {
  configData.data = {
    id: item.id,
    username: item.username,
    password: '',
  };
  editShow.value = true;
};

const submitForm = () => {
  configHandle.value.handleSubmit(() => {
    proxy
      .post("/xiaomanConfig/edit", configData.data)
      .then(
        () => {
          ElMessage({
            message: "保存成功",
            type: "success",
          });
          editShow.value = false;
          getList();
        },
        (err) => {
          console.log(err);
        }
      );
  });
};

getList();
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.baseRow {
  min-height: 24px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 24px;
  padding-left: 4px;
}
</style>