build

src/views/youzan/othgoodsOffline/columns.js

@@ -0,0 +1,95 @@
+//列表
+const columns = [
+    // {
+    //   type: "expand",
+    //   _slot_: "expand",
+    //   fixed: "left",
+    //   _noset_: true,
+    // },
+    // {
+    //   type: "selection",
+    //   fixed: "left",
+    //   _noset_: true
+    // },
+    // {
+    //   prop: "id",
+    //   label: "ID",
+    //   minWidth: "155px",
+    // },
+    {
+      prop: "spuCode",
+      label: "商品成本编号",
+      minWidth: "155px",
+    },
+    {
+      prop: "good_name",
+      label: "下线商品名称",
+      minWidth: "215px",
+    },
+  
+    {
+      prop: "creater",
+      label: "操作人",
+      minWidth: "155px",
+    },
+    {
+      prop: "addtime",
+      label: "下线时间",
+      minWidth: "155px",
+    },
+    {
+      prop: "",
+
+      label: "操作",
+      fixed: "right",
+      _noset_: true,
+      _slot_:'operation',
+      minWidth: "45px",
+
+    }
+  ]
+  //详情
+  const costArr = [
+    {
+      prop: "spuCode",
+      label: "商品成本编号",
+      span: 6
+    },
+    {
+      prop: "addtime",
+      label: "下线时间",
+      span: 6
+    },
+    {
+      prop: "creater",
+      label: "申请人",
+      span: 6
+    },
+    {
+      prop: "result",
+      label: "下线原因",
+      span: 6
+    },
+    
+    {
+      prop: "good_name",
+      label: "商品名称",
+      span: 24
+    },
+    {
+      prop: "offline_remark",
+      label: "下线备注",
+      span: 24
+    },
+    {
+      prop: "children_list",
+      label: "下线商品信息",
+      span: 24,
+      _slot_:"children_list"
+    },
+  ]
+
+  export {
+    columns,
+    costArr,
+  }

src/views/youzan/othgoodsOffline/detail.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="box">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="商品下线详情" name="1">
+        <show-data-table
+          :newTime="newTime"
+          v-if="newTime !== ''"
+          :sitem="list"
+          :columns="costArr"
+        >
+          <template slot="children_list">
+            <el-table :data="list.children_list" size="mini" style="width: 100%">
+              <el-table-column prop="skuCode" label="商品上线编号" min-width="140">
+              </el-table-column>
+              <el-table-column prop="platform_name" label="平台名称" min-width="140">
+              </el-table-column>
+
+              <el-table-column prop="purchease" label="采购人" min-width="90">
+              </el-table-column>
+              <el-table-column prop="creater" label="创建人" min-width="90">
+              </el-table-column>
+            </el-table>
+          </template>
+        </show-data-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import mixinPage from "@/mixins/elPaginationHandle";
+import resToken from "@/mixins/resToken";
+import asyncRequest from "@/apis/service/youzan/goodsOffline";
+import { costArr } from "./columns";
+import { mapGetters } from "vuex";
+export default {
+  name: "othgoodsOffline",
+  mixins: [mixinPage, resToken],
+  components: {},
+  computed: {
+    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
+    powers() {
+      let tran =
+        this.$store.getters.btnList.find(
+          (item) => item.menu_route == "othgoodsOffline"
+        ) || {};
+      if (tran && tran.action && tran.action.length > 0) {
+        return tran.action;
+      } else {
+        return [];
+      }
+    },
+  },
+  data() {
+    return {
+      //loading
+      loading: false,
+      //数据
+      list: {},
+      parmValue: {
+        id: this.$route.query.id,
+      },
+      activeName: "1",
+      newTime: "",
+      costArr,
+    };
+  },
+  mounted() {
+    this.searchList();
+  },
+  methods: {
+    async searchList() {
+      this.loading = true;
+
+      const res = await asyncRequest.goodoffdetail(this.parmValue);
+      if (res && res.code === 0 && res.data) {
+        this.list = res.data;
+        console.log(this.list);
+      } else if (res && res.code >= 100 && res.code <= 104) {
+        await this.logout();
+      } else {
+        this.$message.warning(res.message);
+        this.list = [];
+      }
+      this.getNewTime();
+      this.loading = false;
+    },
+    getNewTime() {
+      this.newTime = new Date().valueOf();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box {
+  padding: 20px 20px 0;
+  box-sizing: border-box;
+}
+</style>

src/views/youzan/othgoodsOffline/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <ex-table
+      v-loading="loading"
+      :table="table"
+      :data="tableData"
+      :columns="columns"
+      :page="pageInfo"
+      :size="size"
+      @page-curr-change="handlePageChange"
+      @page-size-change="handleSizeChange"
+      @screen-reset="
+        pageInfo.curr = 1;
+        parmValue.page = 1;
+        searchList();
+      "
+      @screen-submit="
+        pageInfo.curr = 1;
+        parmValue.page = 1;
+        searchList();
+      "
+      @selection="selection_change"
+    >
+      <template #table-header="{}">
+        <div style="width: 100%">
+          <el-row style="padding: 0 0 0 80px">
+            <el-col :span="6" style="width: 363px">
+              <periodDatePickerActive
+                :start="parmValue.start_date"
+                :end="parmValue.end_date"
+                :placeholder="'下线'"
+                :width="'165px'"
+                :size="searchSize"
+                @timeReturned="time"
+              />
+            </el-col>
+            <el-col :span="6" style="width: 163px">
+              <el-input
+                :size="searchSize"
+                v-model="parmValue.creater"
+                :maxlength="40"
+                @blur="
+                  pageInfo.curr = 1;
+                  parmValue.page = 1;
+                  searchList();
+                "
+                placeholder="创建人"
+              ></el-input>
+            </el-col>
+
+            <el-col :span="3" style="width: 66px; float: right">
+              <el-button
+                :size="searchSize"
+                type="primary"
+                style="float: right; margin-left: 5px"
+                @click="searchList"
+              >
+                刷新
+              </el-button>
+            </el-col>
+            <el-col :span="4" style="width: 66px; float: right">
+              <el-button type="warning" class="fr" :size="searchSize" @click="restSearch">
+                重置
+              </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </template>
+      <template #operation="{ scope }">
+        <el-tooltip
+          v-if="powers.some((item) => item == '007')"
+          effect="dark"
+          content="详情"
+          placement="top"
+        >
+          <i
+            class="el-icon-view tb-icon"
+            @click="getRouter('othgoodsOffline', scope.row.id)"
+          ></i>
+        </el-tooltip>
+      </template>
+    </ex-table>
+  </div>
+</template>
+<script>
+import mixinPage from "@/mixins/elPaginationHandle";
+import resToken from "@/mixins/resToken";
+import urlConfig from "@/apis/url-config";
+import asyncRequest from "@/apis/service/goodStore/goodsOffline";
+import periodDatePickerActive from "./period-date-picker/main.vue";
+import { columns } from "./columns";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "goodsOffline",
+  mixins: [mixinPage, resToken],
+  components: {
+    periodDatePickerActive,
+  },
+  computed: {
+    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
+    powers() {
+      let tran =
+        this.$store.getters.btnList.find((item) => item.menu_route == "goodsOffline") ||
+        {};
+      if (tran && tran.action && tran.action.length > 0) {
+        return tran.action;
+      } else {
+        return [];
+      }
+    },
+  },
+  data() {
+    return {
+      //选中数组
+      changeList: [],
+      //全局url
+      fileUrl: urlConfig.baseURL,
+      //loading
+      loading: false,
+      //请求参数集合
+      parmValue: {
+        start_date: "", //起始时间
+        end_date: "", // 结束时间
+        // is_export:0,//是否导出0/1
+        creater: "", //创建人
+        page: 1, // 页码
+        size: 15, // 每页显示条数
+      },
+      // 表格 - 数据集合
+      tableData: [],
+      // 表格 - 参数
+      table: {
+        stripe: true,
+        border: true,
+        _defaultHeader_: ["setcol"],
+      },
+      // 表格 - 分页
+      pageInfo: {
+        size: 15,
+        curr: 1,
+        total: 0,
+      },
+      // 表格表头 - 列参数
+      columns: columns,
+    };
+  },
+  mounted() {
+    // alert("此页面暂时只用做开发人员测试、数据不真实")
+    const { back } = this.$route.query;
+
+    if (back) {
+      this.parmValue = JSON.parse(back);
+      console.log(this.parmValue);
+      const { page, size } = this.parmValue;
+
+      this.pageInfo = {
+        size: size,
+        curr: page,
+        total: 0,
+      };
+      //多选条件
+      // this.select = this.parmValue.select;
+      // this.sselect = this.parmValue.sselect;
+      // this.sinput = this.parmValue.sinput;
+    } else {
+      // this.select = "1";
+      //  this.sselect = "创建时间"
+    }
+    this.searchList();
+  },
+
+  methods: {
+    getRouter(toRouter, queryId) {
+      if (toRouter && queryId) {
+        let model = {
+          id: queryId,
+          type: "view",
+        };
+
+        //有多选框的条件
+        // this.parmValue.select = this.select ;
+        // this.parmValue.sselect = this.sselect ;
+        // this.parmValue.sinput= this.sinput;
+        //
+        // console.log(this.parmValue)
+        let routerModel = {
+          options: JSON.parse(JSON.stringify(this.parmValue)),
+          router: this.$route.path,
+        };
+        model.preModel = JSON.stringify(routerModel);
+
+        this.routeGoto(toRouter, model);
+      } else {
+        this.$message.warning("暂未找到相关流程！");
+      }
+    },
+    //初始化http请求
+    async searchList() {
+      if (
+        (this.parmValue.start_date !== "" && this.parmValue.end_date === "") ||
+        (this.parmValue.start_date === "" && this.parmValue.end_date !== "")
+      ) {
+        this.$message.warning("时间区间不完整！");
+        return;
+      }
+      this.loading = true;
+      console.log(this.parmValue);
+      const res = await asyncRequest.goodofflist(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.$message.warning(res.message);
+        this.tableData = [];
+        this.pageInfo.total = 0;
+      }
+      this.loading = false;
+    },
+
+    //重置
+    restSearch() {
+      this.parmValue = {
+        start_date: "", //新建起始时间
+        end_date: "", // 新建结束时间
+        creater: "", //创建人
+        // is_export:0,//是否导出0/1
+        page: 1, // 页码
+        size: 15, // 每页显示条数
+      };
+      // 表格 - 分页
+      this.pageInfo = {
+        size: 15,
+        curr: 1,
+        total: 0,
+      };
+      this.searchList();
+    },
+
+    // 时间函数
+    async time(e) {
+      this.parmValue.start_date = e.startTime || "";
+      this.parmValue.end_date = e.endTime || "";
+      if (
+        (this.parmValue.start_date !== "" && this.parmValue.end_date === "") ||
+        (this.parmValue.start_date === "" && this.parmValue.end_date !== "")
+      ) {
+        this.$message.warning("时间区间不完整！");
+        return;
+      }
+      this.pageInfo.curr = 1;
+      this.parmValue.page = 1;
+      await this.searchList();
+    },
+
+    //选中触发函数
+    selection_change(e) {
+      const { list } = e;
+      //选中的数组集合
+      this.changeList = list.length > 0 ? JSON.parse(JSON.stringify(list)) : [];
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.purchaseOrder {
+  // text-align: right;
+}
+</style>

src/views/youzan/othgoodsOffline/period-date-picker/index.js

@@ -0,0 +1,2 @@
+import Main from './main.vue'
+export default Main

src/views/youzan/othgoodsOffline/period-date-picker/main.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="fl time">
+    <el-date-picker
+      v-model="startTime"
+      style="margin: 0"
+      class="date-picker"
+      type="date"
+      :size="size"
+      :style="{ width: width }"
+      :placeholder="(placeholder||'') + '开始日期'"
+      value-format="yyyy-MM-dd"
+      :picker-options="pickerOptions1"
+      :editable="false"
+      :clearable="true"
+      :disabled="isEdit"
+      @change="timeChange"
+    />
+    <samp style="padding: 0 3px; margin: 0">至</samp>
+    <el-date-picker
+      style="margin: 0"
+      :size="size"
+      v-model="endTime"
+      class="date-picker"
+      :style="{ width: width }"
+      type="date"
+      :placeholder="(placeholder||'') + '结束日期'"
+      :disabled="isEdit"
+      :picker-options="pickerOptions2"
+      :editable="false"
+      value-format="yyyy-MM-dd"
+      :clearable="true"
+      @change="timeChange"
+    />
+  </div>
+</template>
+
+<script>
+// 选择时间段(只有日期)组件
+// timeReturned 返回值{startTime: Number,endTime: Number}
+export default {
+  name: "PeriodDatePicker",
+  props: ["start", "end", "disabled", "size", "width", "type", "placeholder"],
+  data() {
+    return {
+      startTime: this.start,
+      endTime: this.end,
+      isEdit: this.disabled,
+      pickerOptions1: {
+        disabledDate: (time) => {
+          if (this.endTime != null && this.endTime != "" && time) {
+            return time.getTime() > new Date(this.endTime).valueOf();
+          }
+        },
+      },
+      pickerOptions2: {
+        disabledDate: (time) => {
+          if (this.startTime != null && this.startTime != "" && time) {
+            return time.getTime() < new Date(this.startTime).valueOf();
+          }
+        },
+      },
+    };
+  },
+  watch: {
+    disabled: function (val) {
+      this.isEdit = val;
+    },
+    start(val) {
+      this.startTime = val;
+    },
+    end(val) {
+      this.endTime = val;
+    },
+  },
+  mounted() {},
+  methods: {
+    timeChange() {
+      if (
+        this.startTime !== "" &&
+        this.startTime !== null &&
+        this.endTime !== "" &&
+        this.endTime !== null
+      ) {
+        if (this.type + "" === "1" && !this.setType(365)) {
+          this.showMessage("时间跨度不能超过一年！");
+          return;
+        } else if (this.type + "" === "2" && !this.setType(90)) {
+          this.showMessage("时间跨度不能超过90天！");
+          return;
+        }else if (this.type + "" === "3" && !this.setType(30)) {
+          this.showMessage("时间跨度不能超过30天！");
+          return;
+        } else if (
+          new Date(this.endTime).valueOf() < new Date(this.startTime).valueOf()
+        ) {
+          this.showMessage("结束时间不大于开始时间！");
+          return;
+        } else {
+          this.timeReturned();
+        }
+      } else {
+        this.timeReturned();
+      }
+    },
+    timeReturned() {
+      let s = this.startTime == null ? "" : this.startTime;
+      let e = this.endTime == null ? "" : this.endTime;
+      let model = {
+        startTime: s == "" ? "" : this.transformTime(s),
+        endTime: e == "" ? "" : this.transformTime(e),
+      };
+
+      this.$emit("timeReturned", model);
+    },
+
+    transformTime(tTime) {
+      let time = new Date(tTime);
+      let y = time.getFullYear();
+      let M = time.getMonth() + 1;
+      let d = time.getDate();
+      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
+    },
+    showMessage(message) {
+      this.$message.error(message);
+      this.startTime = "";
+      this.endTime = "";
+      this.timeReturned();
+    },
+    setType(days) {
+      let step = 24 * 3600 * 1000;
+      let sDay = new Date(this.startTime).valueOf();
+      let eDay = new Date(this.endTime).valueOf();
+      let isok = true;
+      if (eDay - sDay > step * days) {
+        isok = false;
+      }
+
+      return isok;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.date-picker.el-input {
+  // width: 150px !important;
+}
+</style>