log-server-web/src/view/rentComputer/rent_computer_shop.vue

<!--
 * @Author: 倚楼听风雨 18408246387@163.com
 * @Date: 2022-11-16 17:16:17
 * @LastEditors: 倚楼听风雨 18408246387@163.com
 * @LastEditTime: 2023-01-12 17:17:58
 * @FilePath: \log-server-web\src\view\logComputer\list_computer_distinct.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="gva-search-box">
      <div class="gva-btn-list">
        <el-button size="small" type="primary" icon="plus" @click="addMenu('0')"
          >新增供应商</el-button
        >
      </div>
    </div>
    <div class="row center">
      <el-tag size="large">当前供应商数量 : {{ computerNum }} </el-tag>
    </div>
    <div class="gva-table-box">
      <el-scrollbar max-height="550px">
        <el-table
          :data="tableData"
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            align="left"
            label="供应商名"
            min-width="150"
            prop="name"
            sortable="custom"
          />
          <el-table-column
            align="center"
            label="结算方式"
            min-width="150"
            prop="pay_method"
          >
            <template #default="scope">
              <el-button
                size="small"
                :type="scope.row.pay_method == 0 ? 'primary' : 'success'"
              >
                {{ scope.row.pay_method == 0 ? "先付后用" : "先用后付" }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="描述说明"
            min-width="150"
            prop="description"
          />
          <el-table-column
            align="left"
            label="创建时间"
            min-width="150"
            prop="create_time"
          />
          <el-table-column
            align="left"
            label="更新时间"
            min-width="150"
            prop="update_time"
          />
          <el-table-column align="left" fixed="right" label="操作" width="300">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                link
                icon="edit"
                @click="editMenu(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="primary"
                link
                icon="delete"
                @click="deleteMenu(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      :before-close="handleClose"
      :title="dialogTitle"
    >
      <el-form
        v-if="dialogFormVisible"
        ref="menuForm"
        :inline="true"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="85px"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="供应商名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="描述说明" prop="description">
              <el-input v-model="form.description" type="textarea" :rows="4" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="结算方式" prop="pay_method">
              <el-radio-group v-model="form.pay_method">
                <el-radio :label="1" size="large">先用后付</el-radio>
                <el-radio :label="0" size="large">先付后用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "computer-shop",
};
</script>

<script setup>
import {
  listRentComputerShopList,
  getRentComputerShopNum,
  getRentComputerShopById,
  addRentComputerShop,
  editRentComputerShop,
  deleteRentComputerShopById,
} from "@/api/rentComputer";
import { toSQLLine } from "@/utils/stringFun";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const apis = ref([]);
const form = ref({
  id: 0,
  name: "",
  description: "",
  pay_method: 0,
  create_time: "",
});

const rules = ref({
  name: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
  description: [{ required: true, message: "请输入描述", trigger: "blur" }],
  pay_method: [{ required: true, message: "请选择", trigger: "blur" }],
});

const page = ref(1);
const total = ref(0);
const pageSize = ref(20);
const tableData = ref([]);
let spanArr = [];
const searchInfo = ref({});

// const getSpanArr = (data) => {
//   spanArr = [];
//   var pos = 0;
//   for (var i = 0; i < data.length; i++) {
//     if (i === 0) {
//       spanArr.push(1);
//       pos = 0;
//     } else {
//       if (data[i].pc_code === data[i - 1].pc_code) {
//         spanArr[pos] += 1;
//         spanArr.push(0);
//       } else {
//         spanArr.push(1);
//         pos = i;
//       }
//     }
//   }
//   console.log(spanArr);
// };

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  getTableData();
};

const handleCurrentChange = (val) => {
  page.value = val;
  getTableData();
};

// 排序
const sortChange = ({ prop, order }) => {
  if (prop) {
    if (prop === "id") {
      prop = "id";
    }
    searchInfo.value.orderKey = toSQLLine(prop);
    searchInfo.value.desc = order === "descending";
  }
  getTableData();
};

// 查询
const getTableData = async () => {
  const table = await listRentComputerShopList({
    page: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value,
  });
  if (table.code === 0) {
    tableData.value = table.data.list;
    total.value = table.data.total;
    page.value = table.data.page;
    pageSize.value = table.data.pageSize;
    // getSpanArr(table.data.list);
    // console.log(table);
    getComputerShopNum();
  }
};

const computerNum = ref("");
// 查询
const getComputerShopNum = async () => {
  // console.log("getRentComputerShopNum");
  const table = await getRentComputerShopNum({ ...searchInfo.value });
  console.log(table);
  if (table.code === 0) {
    console.log(table.data);
    computerNum.value = table.data;
  }
};
getTableData();

// 批量操作
const handleSelectionChange = (val) => {
  apis.value = val;
};

const dialogFormVisible = ref(false);
// 弹窗相关
const menuForm = ref(null);
const checkFlag = ref(false);
const initForm = () => {
  checkFlag.value = false;
  menuForm.value.resetFields();
  form.value = {
    id: 0,
    coding: "",
    describe: "",
    parent_id: "",
  };
};
const menuOption = ref([
  {
    id: "0",
    title: "根编号",
  },
]);
const setOptions = () => {
  menuOption.value = [
    {
      id: "0",
      title: "根目录",
    },
  ];
  setMenuOptions(tableData.value, menuOption.value, false);
};
const setMenuOptions = (menuData, optionsData, disabled) => {
  menuData &&
    menuData.forEach((item) => {
      if (item.children && item.children.length) {
        const option = {
          ID: String(item.id),
          disabled: disabled || item.id === form.value.id,
          children: [],
        };
        setMenuOptions(
          item.children,
          option.children,
          disabled || item.id === form.value.id
        );
        optionsData.push(option);
      } else {
        const option = {
          ID: String(item.id),
          disabled: disabled || item.id === form.value.id,
        };
        optionsData.push(option);
      }
    });
};
// 添加菜单方法，id为 0则为添加根菜单
const isEdit = ref(false);
const dialogTitle = ref("新增编号");
const addMenu = (id) => {
  dialogTitle.value = "新增编号";
  form.value.parent_id = String(id);
  isEdit.value = false;
  setOptions();
  dialogFormVisible.value = true;
};
// 修改菜单方法
const editMenu = async (id) => {
  dialogTitle.value = "编辑编号";
  const res = await getRentComputerShopById({ id });
  form.value = res.data;
  isEdit.value = true;
  setOptions();
  dialogFormVisible.value = true;
};

const closeDialog = () => {
  initForm();
  dialogFormVisible.value = false;
};
// 删除菜单
const deleteMenu = async (id) => {
  ElMessageBox.confirm("确定删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      console.log(id);

      const res = await deleteRentComputerShopById({ id });
      if (res.code === 0) {
        ElMessage({
          type: "success",
          message: "删除成功!",
        });
        getTableData();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
const enterDialog = async () => {
  //   console.log(form.value);
  menuForm.value.validate(async (valid) => {
    if (valid) {
      let res;
      if (isEdit.value) {
        form.value.id = Number(form.value.id);
        // form.value.parent_id = Number(form.value.parent_id);
        res = await editRentComputerShop(form.value);
      } else {
        // console.log(form.value.coding);
        form.value.id = Number(form.value.id);
        // form.value.parent_id = Number(form.value.parent_id);
        res = await addRentComputerShop(form.value);
      }
      if (res.code === 0) {
        ElMessage({
          type: "success",
          message: isEdit.value ? "编辑成功" : "添加成功!",
        });
        getTableData();
      }
      initForm();
      dialogFormVisible.value = false;
    }
  });
};
</script>

<style scoped lang="scss">
.button-box {
  padding: 10px 20px;
  .el-button {
    float: right;
  }
}
.warning {
  color: #dc143c;
}
</style>