1

src/views/product/index.vue

@@ -1,20 +1,43 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <el-tabs v-model="active" type="card">
-          <el-tab-pane label="待审核" name="first">
-            <data-table :opera="opera" :fields="fields" :data="oneList" :total="oneTotal" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
-          </el-tab-pane>
-          <el-tab-pane label="审核通过" name="second">
-            <data-table :opera="opera" :fields="fields" :data="twoList" :total="twoTotal" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
-          </el-tab-pane>
-          <el-tab-pane label="审核失败" name="third">
-            <data-table :opera="opera" :fields="fields" :data="thrList" :total="thrTotal" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
-          </el-tab-pane>
-        </el-tabs>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-button type="primary" size="mini" @click="toImport()">导入数据</el-button>
+        </el-col>
+        <el-col :span="24">
+          <el-tabs v-model="active" type="card">
+            <el-tab-pane label="待审核" name="first">
+              <data-table :opera="opera" :fields="fields" :data="oneList" :total="oneTotal" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
+            </el-tab-pane>
+            <el-tab-pane label="审核通过" name="second">
+              <data-table :opera="opera" :fields="fields" :data="twoList" :total="twoTotal" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
+            </el-tab-pane>
+            <el-tab-pane label="审核失败" name="third">
+              <data-table :opera="opera" :fields="fields" :data="thrList" :total="thrTotal" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
       </el-col>
     </el-row>
+    <el-dialog
+      :title="dialog.title"
+      :visible.sync="dialog.show"
+      :width="dialog.widths"
+      :before-close="toClose"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+    >
+      <el-form ref="form" :model="form" :rules="{}" label-width="140px">
+        <el-form-item label="数据文件">
+          <e-upload url="/files/uri/upload" :limit="1" v-model="form.uri" type="uri" @upload="upload" @delete="onDelete"></e-upload>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="onSubmit('form')">提交导入</el-button>
+          <el-button type="danger" size="mini" @click="toClose('form')">取消导入</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -70,13 +93,16 @@ export default {
       twoTotal: 0,
       thrList: [],
       thrTotal: 0,
+      // 导入数据
+      dialog: { title: '导入数据', show: false, type: '1', widths: '50' },
+      form: {},
     };
   },
   async created() {
     await this.search();
   },
   methods: {
-    ...product(['query', 'delete']),
+    ...product(['query', 'delete', 'import']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
       let user = this.user;
       if (user.code) info.code = user.code;
@@ -109,6 +135,32 @@ export default {
         this.search();
       }
     },
+    // 导入数据
+    toImport() {
+      this.dialog = { title: '导入数据', show: true, type: '1', widths: '40%' };
+    },
+    // 提交导入
+    async onSubmit() {
+      let data = this.form;
+      data.defObject = { type: '1', status: '2', user_id: '5f83f991801b6d0b24de85d1' };
+      let res = await this.import(data);
+      if (this.$checkRes(res)) {
+        this.$message({ message: `导入成功`, type: 'success' });
+        this.toClose();
+      }
+    },
+    upload({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
+    onDelete({ type, data }) {
+      this.$set(this.form, `${type}`, '');
+    },
+    // 关闭弹框
+    toClose() {
+      this.form = {};
+      this.dialog = { title: '导入数据', show: false, type: '1' };
+      this.search();
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -117,4 +169,11 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .one {
+    text-align: right;
+    margin: 0 0 10px 0;
+  }
+}
+</style>