产品列表

src/views/backstage/customMgt/customTabulate/index.vue

@@ -12,7 +12,7 @@
       <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
         <el-option v-for="item in dict.custom_status" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
-      <date-range-picker v-model="query.createTime" start-placeholder="开始日期（注册）" style="width: 280px" />
+      <date-range-picker v-model="query.createTime" start-placeholder="注册开始日期" style="width: 280px" />
       <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
       <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
     </div>
@@ -21,14 +21,15 @@
         <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加客户</el-button>
       </div>
       <div style="text-align: right">
-        <el-button type="danger" icon="el-icon-help" @click="batchOperate(0)">批量锁定</el-button>
-        <el-button type="success" icon="el-icon-finished" @click="batchOperate(1)">批量激活</el-button>
+        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(1)">批量激活</el-button>
+        <el-button type="danger" icon="el-icon-help" :disabled="!multipleSelection.length" @click="batchOperate(0)">批量锁定</el-button>
       </div>
     </div>
     <!-- 表格 -->
     <div class="content">
       <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
         <el-table-column prop="username" label="用户名" />
         <el-table-column prop="area" label="区域" />
         <el-table-column prop="xxx" label="企业名称" />
@@ -41,15 +42,15 @@
         </el-table-column>
         <el-table-column label="锁定/激活" align="center" width="100">
           <template slot-scope="scope">
-            <el-switch v-model="scope.row.enabled" :disabled="scope.row.status>2" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
+            <el-switch v-model="scope.row.enabled" :disabled="scope.row.status>2" active-color="#13ce66" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
           </template>
         </el-table-column>
         <el-table-column prop="xxx" label="注册时间" align="center" width="100" />
-        <el-table-column prop="xxx" label="操作" align="center" width="200">
+        <el-table-column prop="xxx" label="操作" align="right" width="200">
           <template slot-scope="scope">
             <el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip content="审核"><el-button round plain type="warning" icon="el-icon-s-check" @click="toEdit(scope.row)" /></el-tooltip>
             <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
-            <el-tooltip content="审核"><el-button round plain type="danger" icon="el-icon-s-check" @click="toEdit(scope.row)" /></el-tooltip>
           </template>
         </el-table-column>
       </el-table>
@@ -85,6 +86,9 @@ export default {
     })
   },
   methods: {
+    indexMethod(index) {
+      return 1 + index + this.page * this.pageSize - this.pageSize
+    },
     handleSelectionChange(val) {
       this.multipleSelection = val
     },

src/views/backstage/productMgt/productTabulate/add.vue

+<template>
+  <!-- 表单渲染 -->
+  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
+    <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
+      <el-form-item label="标识设置：" class="form-cell" prop="rank">
+        <div class="cell-box">
+          <el-radio-group v-model="formData.rank" size="mini">
+            <el-radio v-for="item in dict.supplier_rank" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </div>
+      </el-form-item>
+      <el-form-item label="企业名称：" class="form-cell" prop="name">
+        <div class="cell-box">
+          <el-input v-model="formData.name" placeholder="请输入企业名称" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="企业联系人：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入联系人" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="企业联系人手机号：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入手机号" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="企业地址：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入地址" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="企业邮箱：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入邮箱" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="营业执照：" class="form-cell">
+        <div class="cell-box">
+          <el-input v-model="formData.picFileName" style="width:160px;" placeholder="请上传图片" disabled />
+          <input type="file" name="image" @change="excelImport($event)">
+        </div>
+        <el-image v-show="formData.picFileName" :src="formData.picFileName?imgSrcStart+'/businessLicense/'+formData.picFileName:''" :preview-src-list="[imgSrcStart+'/businessLicense/'+formData.picFileName]" style="width: 300px;">
+          <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
+        </el-image>
+      </el-form-item>
+      <el-form-item label="统一社会信用代码：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入18位统一社会信用代码" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="纳税人识别号：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入纳税人识别号" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="所属行业：" class="form-cell" prop="hy">
+        <div class="cell-box">
+          <el-select v-model="formData.hy" placeholder="无" class="cell-select">
+            <el-option v-for="item in dict.industry_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="登记机关：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入登记机关" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="法定代表人：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="请输入法定代表人" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="经营状态：" class="form-cell" prop="zt">
+        <div class="cell-box">
+          <el-select v-model="formData.zt" placeholder="无" class="cell-select">
+            <el-option v-for="item in dict.business_status" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="成立日期：" class="form-cell" prop="zt">
+        <div class="cell-box">
+          <el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" />
+        </div>
+      </el-form-item>
+      <el-form-item label="经营期限：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" type="number" placeholder="请输入数字" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="审核/年检日期：" class="form-cell" prop="zt">
+        <div class="cell-box">
+          <el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" />
+        </div>
+      </el-form-item>
+      <el-form-item label="企业类型：" class="form-cell" prop="lx">
+        <div class="cell-box">
+          <el-select v-model="formData.lx" placeholder="无" class="cell-select">
+            <el-option v-for="item in dict.company_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="注册资本：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" type="number" placeholder="请输入数字" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="注册地址：" class="form-cell" prop="lx">
+        <div class="cell-box">
+          <el-select v-model="formData.province" placeholder="省" style="width: 120px" @change="findAreaByCodeAndType(formData.province,2, 'cityOpts')">
+            <el-option v-for="item in provinceOpts" :key="item.id" :label="item.name" :value="item.code" />
+          </el-select>
+          <el-select v-model="formData.city" placeholder="市" style="width: 160px" @change="findAreaByCodeAndType(formData.city,3, 'countyOpts')">
+            <el-option v-for="item in cityOpts" :key="item.id" :label="item.name" :value="item.code" />
+          </el-select>
+          <el-select v-model="formData.county" placeholder="区/县" style="width: 160px">
+            <el-option v-for="item in countyOpts" :key="item.id" :label="item.name" :value="item.code" />
+          </el-select>
+        </div>
+        <div class="cell-box">
+          <el-input v-model="formData.xxxxx" placeholder="详细地址（例如：和平路北大街106号）" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="经营范围：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="企业介绍：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="主营产品：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="业务范围：" class="form-cell" prop="xxxxx">
+        <div class="cell-box">
+          <el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
+        </div>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancelView">取消</el-button>
+      <el-button type="primary" @click="submitForm()">提交</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { HttpReq } from '@/api/common.js'
+
+export default {
+  dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],
+  data() {
+    return {
+      imgSrcStart: process.env.VUE_APP_BASE_API,
+      visible: false,
+      title: '客户信息',
+      provinceOpts: [],
+      cityOpts: [],
+      countyOpts: [],
+      formData: {
+        rank: '1',
+        picFileName: '',
+        province: null,
+        city: null,
+        county: null,
+        name: ''
+      },
+      rules: {
+        name: { required: true, message: '请输入企业名称', trigger: 'blur' }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.findAreaByCodeAndType(0, 1, 'provinceOpts')
+      this.loadData()
+    })
+  },
+  methods: {
+    showView() {
+      this.visible = true
+    },
+    hideView() {
+      this.$refs.formViewRef.resetFields()
+      this.cityOpts = []
+      this.countyOpts = []
+      this.visible = false
+    },
+    cancelView() {
+      this.hideView()
+    },
+    submitForm() {
+      this.$refs.formViewRef.validate(valid => {
+        if (valid) {
+          console.log(this.formData)
+        }
+      })
+    },
+    excelImport(event) {
+      const file = event.target.files[0]
+      const formData = new FormData()
+      formData.append('businessLicense', file)
+      HttpReq.backstageApi.uploadBusinessLicense(formData).then((res) => {
+        this.$nextTick(() => {
+          this.formData.picFileName = res.businessLicense
+          this.$notify({
+            title: '上传成功！',
+            type: 'success',
+            duration: 2500
+          })
+        })
+      })
+    },
+    findAreaByCodeAndType(code, type, optsName) {
+      switch (optsName) {
+        case 'provinceOpts':
+        case 'cityOpts':
+          this.formData.city = null
+          this.formData.county = null
+          break
+        case 'countyOpts':
+          this.formData.county = null
+      }
+      HttpReq.backstageApi.findAreaByCodeAndType({
+        code, type
+      }).then((res) => {
+        this[optsName] = res
+      })
+    },
+    loadData() {
+
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.cell-box {
+  min-width: 120px;
+  .cell-input {
+    width: 420px;
+  }
+  .cell-select {
+    width: 220px;
+  }
+  >>>.el-input__inner {
+    border: 1px solid rgba(100, 100, 100, 0.1);
+    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
+    border-radius: 5px;
+  }
+  >>>.el-input.is-disabled .el-input__inner {
+    border-radius: 0;
+    border: 0;
+    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
+    background: white;
+    cursor: text;
+  }
+  >>>.el-input.is-disabled .el-input__icon {
+    cursor: text;
+  }
+  //>>>.el-icon-arrow-up:before {
+  //  content: '';
+  //}
+}
+</style>

src/views/backstage/productMgt/productTabulate/index.vue

 <template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="预留" type="success" />
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <el-input v-model="query.username" clearable placeholder="请输入产品ID" style="width:150px;" />
+      <el-input v-model="query.username" clearable placeholder="请输入产品名称" style="width:280px;" />
+      <el-select v-model="query.area" clearable placeholder="请选择分类" style="width: 150px">
+        <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 150px">
+        <el-option v-for="item in dict.product_status" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <date-range-picker v-model="query.createTime" start-placeholder="最后维护开始日期" style="width: 320px" />
+      <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
+      <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
+    </div>
+    <div class="toolbar">
+      <div>
+        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">新增产品</el-button>
+      </div>
+      <div style="text-align: right">
+        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(1)">批量发布</el-button>
+        <el-button type="danger" icon="el-icon-download" :disabled="!multipleSelection.length" @click="batchOperate(0)">批量下架</el-button>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div class="content">
+      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
+        <el-table-column prop="username" label="产品ID" width="140" />
+        <el-table-column prop="area" label="产品分类" />
+        <el-table-column prop="xxx" label="产品名称" />
+        <el-table-column label="状态" width="100">
+          <template slot-scope="scope">
+            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.product_status[scope.row.status] }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="xxx" label="最后维护日期" align="center" width="100" />
+        <el-table-column prop="xxx" label="操作" align="right" width="200">
+          <template slot-scope="scope">
+            <el-tooltip v-show="scope.row.status==3" content="审核"><el-button round plain type="warning" icon="el-icon-s-check" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip v-show="scope.row.status==4" content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip v-show="scope.row.status==5" content="下架"><el-button round plain type="danger" icon="el-icon-download" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip v-show="scope.row.status>=4" content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
+    </div>
+    <add-view ref="addView" />
   </div>
 </template>
+<script>
+import DateRangePicker from '@/components/DateRangePicker'
+import AddView from './add'
+
+export default {
+  components: { DateRangePicker, AddView },
+  dicts: ['product_type', 'product_status'],
+  data() {
+    return {
+      textColors: ['#ccc', '#000', '#f00', '#000',
+        '#000', '#32cd32', '#bba'],
+      loading: false,
+      page: 1,
+      pageSize: 20,
+      total: 0,
+      query: {},
+      tableData: [],
+      currentTime: '',
+      multipleSelection: []
+    }
+  },
+  mounted() {
+    this.currentTimeFn()
+    this.$nextTick(() => {
+      this.loadData()
+    })
+  },
+  methods: {
+    indexMethod(index) {
+      return 1 + index + this.page * this.pageSize - this.pageSize
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    loadData() {
+      var sort = 'id,desc'
+      var param = { ...this.query }
+      param.page = this.page
+      param.pageSize = this.pageSize
+      param.sort = sort
+      this.tableData = [
+        { username: '张三', area: '火星', status: 2, enabled: false, xxx: '2023-05-09' },
+        { username: '张三', area: '火星', status: 3, enabled: false, xxx: '2023-05-09' },
+        { username: '张三', area: '火星', status: 4, enabled: false, xxx: '2023-05-09' },
+        { username: '李四', area: '地球', status: 5, enabled: true, xxx: '2023-05-09' },
+        { username: '张三', area: '火星', status: 6, enabled: false, xxx: '2023-05-09' }
+      ]
+      this.total = 2
+    },
+    batchOperate(opt) {
+      if (!this.multipleSelection.length) {
+        return this.$message({
+          message: '未选取数据',
+          type: 'info'
+        })
+      }
+      if (opt) {
+        console.log('启用', this.multipleSelection)
+      } else {
+        console.log('启用', this.multipleSelection)
+      }
+    },
+    changeEnabled(data, val) {
+      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+
+      }).catch(() => {
+        data.enabled = !data.enabled
+      })
+    },
+    toAdd() {
+      this.$refs.addView.showView()
+    },
+    toEdit(item) {
+
+    },
+    toSearch() {
+      this.page = 1
+      this.loadData()
+    },
+    clearLimit() {
+      this.query = {}
+      this.currentTimeFn()
+      this.loadData()
+    },
+    pageChange(e) {
+      this.page = e
+      this.loadData()
+    },
+    sizeChange(e) {
+      this.page = 1
+      this.pageSize = e
+      this.loadData()
+    },
+    currentTimeFn() {
+      var date = new Date()
+      var year = date.getFullYear()
+      var month = date.getMonth() + 1
+      var day = date.getDate()
+      if (month >= 1 && month <= 9) {
+        month = '0' + month
+      }
+      if (day >= 0 && day <= 9) {
+        day = '0' + day
+      }
+      this.currentTime = year + '-' + month + '-' + day
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+.content {
+  margin-top: 15px;
+  overflow: auto;
+}
+</style>