update

src/store/index.js

@@ -17,6 +17,8 @@ import organization from '@common/src/store/organization';
 import expert from '@common/src/store/expert';
 import mission from '@common/src/store/mission';
 import patent from '@common/src/store/patent';
+import purchase from '@common/src/store/patent/purchase';
+import sell from '@common/src/store/patent/sell';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -34,5 +36,7 @@ export default new Vuex.Store({
     notice,
     mission,
     patent,
+    purchase,
+    sell,
   },
 });

src/views/adminCenter/trade/index.vue

@@ -1,26 +1,24 @@
 <template>
   <div id="index">
     <el-tabs v-model="active" type="card">
-      <el-tab-pane label="许可" name="first">
-        <list type="0"></list>
+      <el-tab-pane label="交易" name="first">
+        <sell></sell>
       </el-tab-pane>
-      <el-tab-pane label="转让" name="second">
-        <list type="1"></list>
-      </el-tab-pane>
-      <el-tab-pane label="质押" name="third">
-        <list type="2"></list>
+      <el-tab-pane label="求购" name="second">
+        <purchase></purchase>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-import list from './parts/list.vue';
+import sell from './sell.vue';
+import purchase from './purchase.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: { list },
+  components: { sell, purchase },
   data: function () {
     return {
       active: 'first',

src/views/adminCenter/trade/parts/filter_bar.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="filter_bar" style="margin: 10px">
+    <el-row v-for="(l, rowIndex) in fields" :key="`row-${rowIndex}`">
+      <el-col :span="24">
+        <span>{{ l.label }}</span>
+        <span>:</span>
+        <template v-if="l.type === 'radio'">
+          <el-radio-group v-model="form[l.model]">
+            <el-radio :label="undefined">全部</el-radio>
+            <el-radio v-for="(i, index) in getList(rowIndex)" :key="`radio-${l.model}-${index}`" :label="i.value ? i.value : i.label">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </template>
+        <template v-if="l.type === 'range'">
+          <el-select v-model="form[l.model]" size="mini" @change="toClearWrite">
+            <template v-for="(i, index) in l.list">
+              <el-option :key="`options-${index}`" :label="`${i.start}-${i.end}元`" :value="`${i.start}-${i.end}`"></el-option>
+            </template>
+          </el-select>
+          <el-input style="width: 100px" size="mini" v-model.number="form[`${l.model}@start`]" placeholder="最小金额" @input="toClearSelect"></el-input> -
+          <el-input style="width: 100px" size="mini" v-model.number="form[`${l.model}@end`]" placeholder="最大金额" @input="toClearSelect"></el-input>
+        </template>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-button type="primary" size="small" @click="search()">查询</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+/**
+ * fields:
+ * label:字段中文
+ * type:选择方式
+ * model:字段
+ * list:选择的选项,可以写死,可以请求:请求是以 ${model}List 形式命名传入组件,无需prop接收,直接使用$attrs即可;
+ */
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'filter_bar',
+  props: {
+    form: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  model: {
+    prop: 'form',
+    event: 'change',
+  },
+  components: {},
+  data: function () {
+    return {
+      fields: [
+        { label: '专利类型', type: 'radio', model: 'type', list: [{ label: '发明' }, { label: '实用新型' }] },
+        { label: '交易类型', type: 'radio', model: 'sell_type', list: [{ label: '许可' }, { label: '转移' }, { label: '质押' }] },
+        {
+          label: '预算价格',
+          type: 'range',
+          model: 'sell_money',
+          list: [
+            { start: 1000, end: 2000 },
+            { start: 2000, end: 3000 },
+          ],
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    getList(index) {
+      const field = this.fields[index];
+      let list = _.get(field, 'list');
+      if (list) return list;
+      const { model } = field;
+      list = _.get(this.$attrs, `${model}List`, []);
+      return list;
+    },
+    search() {
+      let data = _.cloneDeep(this.form);
+      let obj = {};
+      for (const key in data) {
+        if (data[key]) obj[key] = data[key];
+      }
+      if (obj.sell_money) {
+        const arr = obj.sell_money.split('-');
+        obj[`sell_money@start`] = parseInt(arr[0]);
+        obj[`sell_money@end`] = parseInt(arr[1]);
+        delete obj.sell_money;
+      }
+      if (obj['sell_money@start'] && obj['sell_money@end']) {
+        if (obj['sell_money@end'] < obj['sell_money@start']) {
+          this.$message.error('最大金额 小于 最小金额,请重新输入预算价格');
+          return;
+        }
+      }
+      this.$emit('search', obj);
+    },
+    toClearWrite() {
+      delete this.form[`sell_money@start`];
+      delete this.form[`sell_money@end`];
+    },
+    toClearSelect() {
+      delete this.form[`sell_money`];
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/adminCenter/trade/parts/list.vue

@@ -1,59 +0,0 @@
-<template>
-  <div id="list">
-    <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search"></data-table>
-  </div>
-</template>
-
-<script>
-const moment = require('moment');
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'list',
-  props: {
-    type: { type: String, default: '0' },
-  },
-  components: {},
-  data: function () {
-    return {
-      list: [],
-      total: 0,
-      fields: [
-        { label: '专利名称', model: 'name' },
-        { label: '交易时间', model: 'time' },
-        { label: '交易人', model: 'trade_person' },
-        { label: '交易人电话', model: 'trade_phone' },
-        { label: '交易人邮箱', model: 'trade_email' },
-      ],
-      opera: [{ label: '提醒到期' }],
-    };
-  },
-  created() {
-    this.search();
-  },
-  methods: {
-    async search() {
-      // 根据type去找各类型的数据
-      for (let i = 1; i <= 5; i++) {
-        this.list.push({
-          name: `专利${i}`,
-          time: moment().add(i, 'd').format('YYYY-MM-DD HH:mm:ss'),
-          trade_person: 'test',
-          trade_phone: '12345678900',
-          trade_email: 'test@qq.com',
-        });
-      }
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/views/adminCenter/trade/purchase.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="purchase">
+    <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search"></data-table>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: purchase } = createNamespacedHelpers('purchase');
+export default {
+  name: 'purchase',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      list: [],
+      total: 0,
+      fields: [
+        { label: '求购专利要求', model: 'demand' },
+        { label: '专利类型', model: 'type' },
+        { label: '求购类型', model: 'purchase_type' },
+        { label: '预算金额', model: 'money' },
+        { label: '联系人', model: 'contacts' },
+        { label: '手机号', model: 'phone' },
+        { label: '邮箱', model: 'email' },
+        { label: '状态', model: 'status' },
+      ],
+      opera: [{ label: '提醒到期' }],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...purchase(['query']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/adminCenter/trade/sell.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="sell">
+    <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search">
+      <template #filter>
+        <filter-bar v-model="filter" @search="search"></filter-bar>
+      </template>
+    </data-table>
+  </div>
+</template>
+
+<script>
+import filterBar from './parts/filter_bar.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: sell } = createNamespacedHelpers('sell');
+export default {
+  name: 'sell',
+  props: {},
+  components: { filterBar },
+  data: function () {
+    return {
+      list: [],
+      total: 0,
+      fields: [
+        { label: '申请号', model: 'create_number' },
+        { label: '专利名称', model: 'name' },
+        { label: '权利人', model: 'inventor' },
+        { label: '申请类型', model: 'type' },
+        { label: '交易类型', model: 'sell_type' },
+        { label: '交易金额', model: 'sell_money' },
+        { label: '联系人', model: 'contacts' },
+        { label: '手机号', model: 'phone' },
+        { label: '邮箱', model: 'email' },
+        { label: '状态', model: 'status' },
+      ],
+      opera: [{ label: '提醒到期' }],
+      filter: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...sell(['query']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info, ...this.filter });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/jg/trade/index.vue

@@ -1,26 +1,24 @@
 <template>
   <div id="index">
     <el-tabs v-model="active" type="card">
-      <el-tab-pane label="许可" name="first">
-        <list type="0"></list>
+      <el-tab-pane label="交易" name="first">
+        <sell></sell>
       </el-tab-pane>
-      <el-tab-pane label="转让" name="second">
-        <list type="1"></list>
-      </el-tab-pane>
-      <el-tab-pane label="质押" name="third">
-        <list type="2"></list>
+      <el-tab-pane label="求购" name="second">
+        <purchase></purchase>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-import list from './parts/list.vue';
+import sell from './sell.vue';
+import purchase from './purchase.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: { list },
+  components: { sell, purchase },
   data: function () {
     return {
       active: 'first',

src/views/jg/trade/parts/filter_bar.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="filter_bar" style="margin: 10px">
+    <el-row v-for="(l, rowIndex) in fields" :key="`row-${rowIndex}`">
+      <el-col :span="24">
+        <span>{{ l.label }}</span>
+        <span>:</span>
+        <template v-if="l.type === 'radio'">
+          <el-radio-group v-model="form[l.model]">
+            <el-radio :label="undefined">全部</el-radio>
+            <el-radio v-for="(i, index) in getList(rowIndex)" :key="`radio-${l.model}-${index}`" :label="i.value ? i.value : i.label">{{ i.label }}</el-radio>
+          </el-radio-group>
+        </template>
+        <template v-if="l.type === 'range'">
+          <el-select v-model="form[l.model]" size="mini" @change="toClearWrite">
+            <template v-for="(i, index) in l.list">
+              <el-option :key="`options-${index}`" :label="`${i.start}-${i.end}元`" :value="`${i.start}-${i.end}`"></el-option>
+            </template>
+          </el-select>
+          <el-input style="width: 100px" size="mini" v-model.number="form[`${l.model}@start`]" placeholder="最小金额" @input="toClearSelect"></el-input> -
+          <el-input style="width: 100px" size="mini" v-model.number="form[`${l.model}@end`]" placeholder="最大金额" @input="toClearSelect"></el-input>
+        </template>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-button type="primary" size="small" @click="search()">查询</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+/**
+ * fields:
+ * label:字段中文
+ * type:选择方式
+ * model:字段
+ * list:选择的选项,可以写死,可以请求:请求是以 ${model}List 形式命名传入组件,无需prop接收,直接使用$attrs即可;
+ */
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'filter_bar',
+  props: {
+    form: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  model: {
+    prop: 'form',
+    event: 'change',
+  },
+  components: {},
+  data: function () {
+    return {
+      fields: [
+        { label: '专利类型', type: 'radio', model: 'type', list: [{ label: '发明' }, { label: '实用新型' }] },
+        { label: '交易类型', type: 'radio', model: 'sell_type', list: [{ label: '许可' }, { label: '转移' }, { label: '质押' }] },
+        {
+          label: '预算价格',
+          type: 'range',
+          model: 'sell_money',
+          list: [
+            { start: 1000, end: 2000 },
+            { start: 2000, end: 3000 },
+          ],
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    getList(index) {
+      const field = this.fields[index];
+      let list = _.get(field, 'list');
+      if (list) return list;
+      const { model } = field;
+      list = _.get(this.$attrs, `${model}List`, []);
+      return list;
+    },
+    search() {
+      let data = _.cloneDeep(this.form);
+      let obj = {};
+      for (const key in data) {
+        if (data[key]) obj[key] = data[key];
+      }
+      if (obj.sell_money) {
+        const arr = obj.sell_money.split('-');
+        obj[`sell_money@start`] = parseInt(arr[0]);
+        obj[`sell_money@end`] = parseInt(arr[1]);
+        delete obj.sell_money;
+      }
+      if (obj['sell_money@start'] && obj['sell_money@end']) {
+        if (obj['sell_money@end'] < obj['sell_money@start']) {
+          this.$message.error('最大金额 小于 最小金额,请重新输入预算价格');
+          return;
+        }
+      }
+      this.$emit('search', obj);
+    },
+    toClearWrite() {
+      delete this.form[`sell_money@start`];
+      delete this.form[`sell_money@end`];
+    },
+    toClearSelect() {
+      delete this.form[`sell_money`];
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/jg/trade/parts/list.vue

@@ -1,59 +0,0 @@
-<template>
-  <div id="list">
-    <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search"></data-table>
-  </div>
-</template>
-
-<script>
-const moment = require('moment');
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'list',
-  props: {
-    type: { type: String, default: '0' },
-  },
-  components: {},
-  data: function () {
-    return {
-      list: [],
-      total: 0,
-      fields: [
-        { label: '专利名称', model: 'name' },
-        { label: '交易时间', model: 'time' },
-        { label: '交易人', model: 'trade_person' },
-        { label: '交易人电话', model: 'trade_phone' },
-        { label: '交易人邮箱', model: 'trade_email' },
-      ],
-      opera: [{ label: '提醒到期' }],
-    };
-  },
-  created() {
-    this.search();
-  },
-  methods: {
-    async search() {
-      // 根据type去找各类型的数据
-      for (let i = 1; i <= 5; i++) {
-        this.list.push({
-          name: `专利${i}`,
-          time: moment().add(i, 'd').format('YYYY-MM-DD HH:mm:ss'),
-          trade_person: 'test',
-          trade_phone: '12345678900',
-          trade_email: 'test@qq.com',
-        });
-      }
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/views/jg/trade/purchase.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="purchase">
+    <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search"></data-table>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: purchase } = createNamespacedHelpers('purchase');
+export default {
+  name: 'purchase',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      list: [],
+      total: 0,
+      fields: [
+        { label: '求购专利要求', model: 'demand' },
+        { label: '专利类型', model: 'type' },
+        { label: '求购类型', model: 'purchase_type' },
+        { label: '预算金额', model: 'money' },
+        { label: '联系人', model: 'contacts' },
+        { label: '手机号', model: 'phone' },
+        { label: '邮箱', model: 'email' },
+        { label: '状态', model: 'status' },
+      ],
+      opera: [{ label: '提醒到期' }],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...purchase(['query']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info, code: this.user.code });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/jg/trade/sell.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="sell">
+    <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search">
+      <template #filter>
+        <filter-bar v-model="filter" @search="search"></filter-bar>
+      </template>
+    </data-table>
+  </div>
+</template>
+
+<script>
+import filterBar from './parts/filter_bar.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: sell } = createNamespacedHelpers('sell');
+export default {
+  name: 'sell',
+  props: {},
+  components: { filterBar },
+  data: function () {
+    return {
+      list: [],
+      total: 0,
+      fields: [
+        { label: '申请号', model: 'create_number' },
+        { label: '专利名称', model: 'name' },
+        { label: '权利人', model: 'inventor' },
+        { label: '申请类型', model: 'type' },
+        { label: '交易类型', model: 'sell_type' },
+        { label: '交易金额', model: 'sell_money' },
+        { label: '联系人', model: 'contacts' },
+        { label: '手机号', model: 'phone' },
+        { label: '邮箱', model: 'email' },
+        { label: '状态', model: 'status' },
+      ],
+      opera: [{ label: '提醒到期' }],
+      filter: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...sell(['query']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info, code: this.user.code, ...this.filter });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>