商品管理

src/views/commodityCenter/commodityManage/list.vue

@@ -1,296 +1,104 @@
-<script>
-import * as api from '@/api/commodityCenter/commodityManage'
-
-const defaultForm = {
-  picture: '',
-  price: 1,
-  describe: '',
-  attachments: [],
-}
+<!-- 模板区域 -->
+<template>
+  <div>
+    <!-- 模板内容 -->
+    <el-form ref="queryForm" :inline="true" :model="queryform" label-width="100px" class="top-search">
+      <el-form-item label="商品名称" prop="name">
+        <el-input v-model="queryform.name" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="状态" prop="name">
+        <el-select v-model="queryform.labelName" placeholder="请选择，支持关键词搜索" clearable filterable>
+          <el-option label="全部" value="1"></el-option>
+          <el-option label="已绑定" value="2"></el-option>
+          <el-option label="未绑定" value="3"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="findPage()">查询</el-button>
+        <el-button @click="resetForm()">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="g-card  ">
+      <templateTable ref="commonTable" :operationWidth="200" :SerialShow="true" :showOperation="true"
+        :showBatchDelete="false" :data="Result" :columns="Columns" @findPage="findPage">
+        <template slot="buttonSlot" slot-scope="{ row }">
+          <el-button type="text" @click="viewDetails(row)">查看</el-button>
+          <el-button type="text" @click="viewDetails(row)">一键分享</el-button>
+        </template>
+      </templateTable>
+    </div>
+  </div>
+</template>
 
+<!-- 行为区域 -->
+<script>
+import templateTable from "@/components/templateTable.vue";
+import { Row } from "element-ui";
 export default {
-  components: {},
-  props: {},
+  components: {
+    templateTable
+  },
+  // 数据存放区域
   data() {
     return {
-      query: {
-        pageNum: 1,
-        pageSize: 10,
-        name: '',
+      queryform: {},//页面检索对象
+      form: {},//提交表单
+      rules: {
+        labelName: [
+          {
+            required: true,
+            message: '请选择员工',
+            trigger: 'chnage',
+          },
+        ],
+
       },
-      loading: false,
-      submitLoading: false,
-      dialogVisible: false,
-      form: JSON.parse(JSON.stringify(defaultForm)),
-      newInput: '',
-      newInputVisible: false,
-      rules: Object.freeze({
-        picture: [{ required: true, message: '必填项', trigger: 'change' }],
-        price: [{ required: true, message: '必填项', trigger: 'change' }],
-        describe: [{ required: true, message: '必填项', trigger: 'blur' }],
-      }),
-      // 选中数组
-      ids: [],
-      multiple: true,
-      total: 0,
-      list: [],
-      lastSyncTime: 0,
-      fileList: [],
+      Result: {
+        content: [
+          {
+            name: "3232",
+            status: true
+          },
+          {
+            name: "3232",
+            status: false
+          }
+        ],
+        totalSize: 100,
+      },
+      Columns: [
+        { prop: "name", label: "商品名称", minWidth: 180, },
+        { prop: "name", label: "商品类目", minWidth: 180, },
+        { prop: "mobile", label: "价格", minWidth: 180 },
+        { prop: "mobile", label: "供应商名称", minWidth: 180 },
+        { prop: "mobile", label: "已售", minWidth: 180 },
+        { prop: "mobile", label: "状态", minWidth: 180 },
+      ],
     }
   },
-  computed: {},
+  // 生命周期函数
   created() {
-    this.$store.dispatch(
-      'app/setBusininessDesc',
-      `
-			     <div>快捷创建商品图册，员工一键发送给客户，客户直接购买。</div>
-			   `,
-    )
-    this.getList()
   },
+  // 方法函数
   methods: {
-    resetForm() {
-      this.query.name = ''
-      this.getList(1)
-    },
-    getList(page) {
-      page && (this.query.pageNum = page)
-      this.loading = true
-      api
-        .getList(this.query)
-        .then(({ rows, total, lastSyncTime }) => {
-          this.list = rows
-          this.total = +total
-          this.lastSyncTime = lastSyncTime
-          this.loading = false
-        })
-        .catch(() => {
-          this.loading = false
-        })
-    },
-    edit(data) {
-      this.fileList = []
-      if (data) {
-        api.getDetail(data.id).then((res) => {
-          this.form = res.data
-          if (this.form.attachments) {
-            let arr = this.form.attachments.split(',')
-            arr.forEach((dd) => {
-              this.fileList.push({ url: dd })
-            })
-          }
-        })
-      } else {
-        this.form = JSON.parse(JSON.stringify(defaultForm))
-      }
-      this.dialogVisible = true
-    },
-    sync() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Loading',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)',
-      })
-      api
-        .sync()
-        .then(() => {
-          loading.close()
-          this.msgSuccess('后台开始同步数据，请稍后关注进度')
-          this.getList()
-        })
-        .catch(() => {
-          loading.close()
-        })
+    // 查看详情
+    viewDetails() {
     },
-    submit() {
-      this.$refs['form'].validate((valid) => {
-        let form = JSON.parse(JSON.stringify(this.form))
-        form.price = form.price.toFixed(2)
-        form.attachments = this.fileList.map((dd) => dd.url).join(',')
-        this.submitLoading = true
-        api[form.id ? 'update' : 'add'](form, form.id)
-          .then(() => {
-            this.msgSuccess('操作成功')
-            this.dialogVisible = false
-            this.getList()
-          })
-          .finally(() => {
-            this.submitLoading = false
-          })
-      })
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id)
-      this.multiple = !selection.length
-    },
-    /** 删除按钮操作 */
-    remove(id) {
-      const operIds = id || this.ids + ''
-      this.$confirm('是否确认删除吗?', '警告', {
-        type: 'warning',
-      })
-        .then(function () {
-          return api.remove(operIds)
-        })
-        .then(() => {
-          this.getList()
-          this.msgSuccess('删除成功')
-        })
-    },
-    goRoute(row) {
-      this.$router.push({
-        path: './detail',
-        query: {
-          id: row.id,
-        },
-      })
+    /**
+     * 停用
+     * @param row status 状态 true 已绑定 false 未绑定
+     */
+    disableAction(row) {
+
+    },   //列表查询
+    findPage() {
+      console.log(1)
     },
   },
+  // 计算属性
+  computed: {
+  }
 }
 </script>
-<template>
-  <div>
-    <el-form ref="queryForm" :inline="true" :model="query" label-width="110px" class="top-search">
-      <el-form-item label="商品名称或描述" prop="name">
-        <el-input clearable v-model="query.name" placeholder="请输入"></el-input>
-      </el-form-item>
-      <el-form-item label="">
-        <el-button type="primary" @click="getList(1)">查询</el-button>
-        <el-button @click="resetForm()">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <div class="g-card">
-      <div class="mid-action">
-        <el-button type="primary" class="mr10" @click="edit()">新建商品</el-button>
-        <el-button :disabled="!ids.length" type="danger" @click="remove()">批量删除</el-button>
-      </div>
-
-      <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="商品" align="center" prop="" width="200">
-          <div slot-scope="{ row }">
-            <div style="display: flex">
-              <el-image
-                style="width: 50px; height: 50px; margin-right: 5px; flex-shrink: 0"
-                :src="row.picture"></el-image>
-              <span class="limit_span">{{ row.describe }}</span>
-            </div>
-          </div>
-        </el-table-column>
-        <el-table-column label="单价(元)" align="center" prop="price" />
-        <el-table-column label="订单总数" align="center" prop="orderNum" />
-        <el-table-column label="订单总额(元)" align="center" prop="orderTotalAmount" />
-        <el-table-column label="创建人" align="center" prop="createBy" />
-        <el-table-column label="最近操作时间" align="center" prop="updateTime" width="180"></el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template slot-scope="{ row, index }">
-            <el-button type="text" @click="goRoute(row)">详情</el-button>
-            <el-button type="text" @click="edit(row, index)">编辑</el-button>
-            <el-button type="text" @click="remove(row.id)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="query.pageNum"
-        :limit.sync="query.pageSize"
-        @pagination="getList()" />
-    </div>
-
-    <!-- 弹窗 -->
-    <el-dialog :title="form.id ? '修改' : '新建'" :visible.sync="dialogVisible" :close-on-click-modal="false">
-      <el-row>
-        <el-col :span="12">
-          <el-form ref="form" :model="form" :rules="rules" label-width="130px">
-            <el-form-item label="商品封面" prop="picture">
-              <upload :fileUrl.sync="form.picture" type="0" :maxSize="10" :format="['jpg', 'png']">
-                <div slot="tip" class="tip">支持jpg/png格式，图片大小不超过10M</div>
-              </upload>
-            </el-form-item>
-            <el-form-item label="商品单价(元)" prop="price">
-              <el-input-number v-model="form.price" :precision="2" :step="0.1" :min="0" :max="50000"></el-input-number>
-              <div class="tip">精确到小数点后两位，不超过5万元</div>
-            </el-form-item>
-            <el-form-item label="商品标题或描述" prop="describe">
-              <el-input
-                v-model="form.describe"
-                type="textarea"
-                :maxlength="270"
-                show-word-limit
-                :autosize="{ minRows: 4, maxRows: 50 }"
-                placeholder="请输入"></el-input>
-            </el-form-item>
-            <el-form-item label="商品详情">
-              <upload
-                :fileList.sync="fileList"
-                :multiple="true"
-                :limit="8"
-                type="0"
-                :maxSize="10"
-                :format="['jpg', 'png']">
-                <div slot="tip" class="tip">最多添加八张详情</div>
-              </upload>
-            </el-form-item>
-          </el-form>
-        </el-col>
-        <el-col :span="12">
-          <PhoneTemplate>
-            <div class="phone-content">
-              <el-image
-                v-if="form.picture"
-                class="commodity-img commodity-thumb"
-                style="width: 100%"
-                :src="form.picture"></el-image>
-              <div v-else class="commodity-img commodity-thumb"></div>
-              <div class="price">￥{{ form.price }}</div>
-              <div class="content">{{ form.describe }}</div>
-              <el-image v-for="(item, index) in fileList" class="commodity-img" :src="item.url" :key="index"></el-image>
-            </div>
-          </PhoneTemplate>
-        </el-col>
-      </el-row>
-      <div slot="footer" class="dialog-footer ar">
-        <el-button type="primary" v-loading="submitLoading" @click="submit">确 定</el-button>
-        <el-button @click="dialogVisible = false">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<style lang="scss" scoped>
-.tip {
-  color: #aaa;
-  font-size: 12px;
-  line-height: 20px;
-}
-.phone-content {
-  padding: 10px;
-}
-.price {
-  font-weight: 500;
-  font-size: 20px;
-  margin: 10px 0;
-}
-.content {
-  margin: 10px 0;
-}
-.commodity-img {
-  width: 100%;
-}
-.limit_span {
-  // width: 250px;
-  // overflow: hidden;
-  // text-overflow: ellipsis;
-  // // white-space: nowrap;
-  // display: inline-block;
-
-  white-space: pre-wrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-</style>
+<!-- 样式区域 -->
+<style lang='scss' scoped></style>