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 po-ul">
        <li class="po-li">
          <div class="taskTitle color1">咨询单任务</div>
          <div class="taskList clear">
            <div
              class="task-item"
              v-for="item in list"
              :key="item"
              @click="wantTo(item.infoNo)"
              :style="
                item.is_all_feed+''==='0'? 'background:#ecf5ff':item.is_feed+'' == '1' ? 'background: #fdf6ec': 'background: #fff'
              "
            >
              <ul class="fl item-ul">
                <li class="fl item-li">
                  <span class="label">任务编号：</span>
                  <span class="label-main">{{ item.infoNo }}</span>
                </li>
                <li class="fl item-li">
                  <span class="label">截止时间：</span>
                  <span class="label-main">{{ item.endtime }}</span>
                </li>
                <li class="fl item-li">
                  <span class="label">商品分类：</span>
                  <span class="label-main">{{ item.cat_name }}</span>
                </li>
                <li class="fl item-li">
                  <span class="label">商品品牌：</span>
                  <span class="label-main">{{ item.brand_name }}</span>
                </li>
                <li class="fl item-li">
                  <span class="label">商品名称：</span>
                  <span class="label-main">
                    <img
                      @click="imgclick"
                      v-if="item.good_img"
                      class="hover"
                      v-viewer
                      style="width: 20px; height: 20px"
                      :src="item.good_img"
                      alt=""
                    />
                    {{ item.good_name }}</span
                  >
                </li>
                <li class="fl item-li">
                  <span class="label">商品预算：</span>
                  <span class="label-main">
                    {{ item.budget_price }}元/{{ item.num }}{{ unit }}</span
                  >
                </li>
              </ul>
            </div>
            <div class="no-data">暂无数据！</div>
          </div>
        </li>

        <!-- <li class="po-li">
          <div class="taskTitle color2">客户指定商品任务</div>
          <div class="taskList">
            <div
              class="task-item"
              v-for="item in list1"
              :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 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 {
      num: 60,
      timer: null,
      roleLevel: roleLevel,
      loading: false,
      showModel: false,
      modelId: "000",
      sitem: {},
      list1: [],
      list: [],
      parmValue: {
        page: 1, // 页码
        size: 1000, // 每页显示条数
        status: "1",
      },
      // 状态
      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(true);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    wantTo(infoNo) {
      console.log(this.powers);
      if (
        this.powers &&
        this.powers.length > 0 &&
        this.powers.some((item) => item == "007")
      ) {
        this.routeGoto("workbenchDetail", { id: infoNo });
      }
    },
    async well_timer() {
      this.timer = setInterval(async () => {
        if (this.num !== 0) {
          this.num--;
        } else {
          if (this.timer) {
            await this.searchList();
            this.num = 60;
          } else {
            this.clearTime();
          }
        }
      }, 1000);
    },
    restSearch() {
      // 表格 - 分页
      this.pageInfo = {
        size: 1000,
        curr: 1,
        total: 0,
      };
      this.parmValue = {
        page: 1, // 页码
        size: 15, // 每页显示条数
        status: "1",
      };
      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("取消");
        });
    },

    imgclick(e) {
      e.stopPropagation();
      e.preventDefault();
    },
    // 刷新表格
    async searchList(type) {
      if (!this.loading) {
        this.loading = true;
        const { code, data } = await asyncRequest.list(this.parmValue);
        if (code === 0) {
          const { list, count } = data;
          this.list = list;
          this.list.map((e) => {
            e.cat_name = "";
            if (e.can && e.can.length > 0) {
              e.can.forEach((a, ai) => {
                e.cat_name += `${ai !== 0 ? "_" : ""}${a.name}`;
              });
            }
            return e;
          });

          this.pageInfo.total = Number(count);
          if (type) {
            await this.well_timer();
          }
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.list = [];
          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.po-ul {
      width: 100%;
      height: 100%;
      overflow-y: hidden;
      box-sizing: border-box;
      li.po-li {
        position: relative;
        height: 100%;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        box-sizing: border-box;
        // border: 1px solid rgba(121, 121, 121, 1);
        .task-item {
          border-bottom: 1px dashed #e6ebf5;
          line-height: 20px;
          overflow: hidden;
          float: left;
          width: 100%;
          padding: 10px 12px;
          text-align: center;
          font-size: 12px;
          ul.item-ul {
            width: 100%;
            padding: 0;
            margin: 0;

            li.item-li {
              width: 100%;
              padding: 0;
              margin: 0;
              .label,
              .label-main {
                height: 20px;
                line-height: 20px;
                overflow: hidden;
              }
              .label {
                width: 60px;
                float: left;
                color: #909499;
                text-align: left;
              }
              .label-main {
                float: left;
                width: calc(100% - 60px);
                text-align: right;
                color: #454545;
                img {
                  display: inline-block;
                  vertical-align: top;
                  margin: 0 2px 0 0;
                }
              }
            }
          }
          .order {
            width: 100%;
          }
          // &:last-child{
          //   border: 0;
          // }
        }
        &:first-child {
          float: left;
          width: 100%;
          // margin: 0 2% 0 0;
          .task-item {
            width: 20%;
            &:nth-child(3n + 1) {
              border-right: 1px dashed #e6ebf5;
            }
            &:nth-child(3n + 2) {
              border-right: 1px dashed #e6ebf5;
            }
          }
          .tast-item-active {
            width: 20%;
            background: skyblue;
            &:nth-child(3n + 1) {
              border-right: 1px dashed #e6ebf5;
            }
            &:nth-child(3n + 2) {
              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>