order-ui-pc/src/views/purchaseIn/workbench/index.vue

<template>
  <div class="workbench">
    <div
      class="workbench-main"
      v-loading="loading"
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <ul class="clear">
        <li>
          <div class="taskTitle color1">咨询单任务</div>
          <div class="taskList clear">
            <div
              class="aaa"
              v-for="item in list"
              :key="item"
              @click="routeGoto('workbenchDetail', { id: 'INF2203151428199103' })"
            >
              {{ item }}
            </div>
            <div class="no-data">暂无数据！</div>
          </div>
        </li>

        <li>
          <div class="taskTitle color2">客户指定商品任务</div>
          <div class="taskList">
            <div
              class="aaa"
              v-for="item in list"
              :key="item"
              @click="routeGoto('workbenchDetail', { id: 'INF2203151428199103' })"
            >
              {{ item }}
            </div>
            <div class="no-data">暂无数据！</div>
          </div>
        </li>
      </ul>
    </div>
    <no-auth v-else></no-auth>
    <!-- 弹窗 新增/修改 -->
    <add-edit
      :id="modelId"
      :show-model="showModel"
      :sitem="sitem"
      @refresh="searchList"
      @cancel="showModel = false"
    />
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/purchaseIn/workbench";
import statusList from "@/assets/js/statusList";
import roleLevel from "@/assets/js/roleLevel";
import mixinPage from "@/mixins/elPaginationHandle";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
export default {
  name: "workbench",
  mixins: [mixinPage, resToken],
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "workbench"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      statusList: statusList,
      roleLevel: roleLevel,
      loading: false,
      showModel: false,
      modelId: "000",
      sitem: {},
      list: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
        39, 40,
      ],
      parmValue: {
        page: 1, // 页码
        size: 15, // 每页显示条数
        starttime: "",
        endtime: "",
        status: "",
        creater: "",
      },
      // 状态
      statusOptions: [
        { id: "0", label: "禁用" },
        { id: "1", label: "启用" },
      ],
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: [
        {
          prop: "id",
          label: "ID",
        },
        {
          prop: "workbench",
          label: "活动名称",
        },
        {
          prop: "status",
          label: "状态",
          sortable: true,
          _slot_: "status",
        },
        {
          prop: "creater",
          label: "创建人",
        },
        {
          prop: "addtime",
          label: "创建时间",
          sortable: true,
        },
        {
          prop: "",
          label: "操作",
          fixed: "right",
          _noset_: true,
          _slot_: "operation",
        },
      ],
    };
  },
  mounted() {
    // this.searchList();
  },
  methods: {
    restSearch() {
      // 表格 - 分页
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.parmValue = {
        page: 1, // 页码
        size: 15, // 每页显示条数
        starttime: "",
        endtime: "",
        status: "",
        creater: "",
      };
      this.searchList();
    },
    // 新建/编辑/详情
    openModal(row, type) {
      this.sitem = row;
      this.modelId = type;
      this.showModel = true;
    },
    // 时间
    async handleTime(e) {
      this.parmValue.starttime = e.startTime || "";
      this.parmValue.endtime = e.endTime || "";
      if (
        (this.parmValue.starttime !== "" && this.parmValue.endtime !== "") ||
        (this.parmValue.starttime === "" && this.parmValue.endtime === "")
      ) {
        this.pageInfo.curr = 1;
        this.parmValue.page = 1;
        await this.searchList();
      }
    },
    /**
     * 启用/禁用
     * @param {String} id id
     * @param {String} status 0-禁用 1-启用
     */
    async changeStatus(id, status) {
      await this.$confirm(`确定要改为${status === "1" ? "禁用" : "启用"}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          const model = {
            id: id,
            status: status === "1" ? "0" : "1",
          };
          const res = await asyncRequest.status(model);
          if (res && res.code === 0) {
            this.loading = false;
            this.$notify.success({
              title: "状态修改成功！",
              message: "",
            });
            await this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.loading = false;
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async deleteItem(id) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const model = {
            id: id,
          };
          const res = await asyncRequest.delete(model);
          if (res && res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    // 刷新表格
    async searchList() {
      this.loading = true;
      const res = await asyncRequest.list1(this.parmValue);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list;
        this.pageInfo.total = Number(res.data.count);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.workbench {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  box-sizing: border-box;
  background: #f0f2f5;
  padding: 16px;
  .workbench-main {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    ul {
      width: 100%;
      height: 100%;
      overflow-y: hidden;
      box-sizing: border-box;
      li {
        position: relative;
        height: 100%;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        box-sizing: border-box;
        // border: 1px solid rgba(121, 121, 121, 1);
        .aaa {
          border-bottom: 1px dashed #e6ebf5;
          height: 140px;
          line-height: 140px;
          float: left;
          width: 100%;
          text-align: center;
          // &:last-child{
          //   border: 0;
          // }
        }
        &:first-child {
          float: left;
          width: 66%;
          margin: 0 2% 0 0;
          .aaa {
            width: 50%;
            &:nth-child(2n + 1) {
              border-right: 1px dashed #e6ebf5;
            }
          }
        }
        &:last-child {
          margin: 0;
          float: right;
          width: 32%;
        }
        .taskTitle {
          width: 100%;
          height: 55px;
          line-height: 55px;
          text-align: center;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          // border-bottom: 1px solid rgba(121, 121, 121, 1);
          &.color1 {
            background: rgba(250, 205, 145, 1);
          }
          &.color2 {
            background: rgba(202, 249, 130, 1);
          }
          // &.color3 {
          //   background: rgba(129, 211, 248, 1);
          // }
          // &.color4 {
          //   background: rgba(255, 255, 128, 1);
          // }
        }
        .taskList {
          position: relative;
          padding: 0 0 0 5px;
          margin: 56px 0 0 0;
          background: #fff;
          height: calc(100% - 56px);
          width: 100%;
          overflow-y: scroll;
          @include scrollBar();
          .no-data {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 14px;
            float: left;
            text-align: center;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }
}
</style>