Merge remote-tracking branch 'origin/gzb' into wzl

src/App.vue

@@ -127,4 +127,8 @@ body,
 .ivu-table-cell {
   text-align: center;
 }
+.foot_page {
+  padding: 16px 0;
+  text-align: right;
+}
 </style>

src/views/service/index.vue

@@ -23,16 +23,95 @@
           <img class="img" v-if="row.scpic" :src="row.scpic" v-viewer />
         </template>
       </Table>
+      <div class="foot_page" v-if="service.total > 0">
+        <Page
+          :total="service.total"
+          @on-change="changePage"
+          :current="form_search.page"
+          show-total
+        ></Page>
+      </div>
     </div>
+    <!--    添加-->
+    <Modal
+      v-model="add_form.show"
+      class="modal1"
+      :mask-closable="false"
+      title="添加服务案例"
+    >
+      <Form
+        :label-width="90"
+        label-position="right"
+        ref="AddForm"
+        :rules="addFormRules"
+        :model="add_form"
+      >
+        <FormItem label="服务案例" prop="scname">
+          <Input v-model="add_form.scname" placeholder="请输入服务案例" />
+        </FormItem>
+        <FormItem label="序号" prop="scorder">
+          <Input v-model="add_form.scorder" number placeholder="请输入序号" />
+        </FormItem>
+        <div class="upload">
+          <Upload
+            action
+            class="file_left_up"
+            accept=".jpg,.jpeg,.png"
+            :before-upload="
+              (file) => {
+                handleUpload(file);
+                return false;
+              }
+            "
+          >
+            <div
+              class="upload-img"
+              v-if="!this.add_form.scpic"
+              style="padding-top: 10px"
+            >
+              <Icon
+                type="ivu-icon ivu-icon- iconfont icon-shangchuan"
+                size="42"
+                color="#e6e6e6"
+              />
+              <p
+                class="shangchuan_btn"
+                style="margin-top: 10px; font-size: 14px; text-align: center"
+              >
+                上传图片
+              </p>
+            </div>
+            <div v-else>
+              <img
+                class="upload-img"
+                :src="$api.showImageUrl + add_form.scpic"
+              />
+            </div>
+          </Upload>
+        </div>
+      </Form>
+      <div slot="footer" style="text-align: right">
+        <Button @click="add_form.show = false">取消</Button>
+        <Button @click="toSaveAdd()" type="primary">保存</Button>
+      </div>
+    </Modal>
+    <!-- 等待窗 -->
+    <Spin fix v-if="showLoading" style="background-color: transparent">
+      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+      <div>加载中</div>
+    </Spin>
   </div>
 </template>
 
 <script>
-import { sc_list } from "@/api/index";
+import axios from "axios";
+import { sc_list, sc_save, sc_update, sc_remove } from "@/api/index";
 import { dateFormat } from "@/utils/index";
 export default {
   data() {
     return {
+      userInfo: {},
+      showLoading: false,
       form_search: {
         page: 1,
         size: 10,
@@ -126,10 +205,33 @@ export default {
             ]);
           }
         }
-      ] //列表表格
+      ], //列表表格
+      add_form: {
+        show: false,
+        scname: "",
+        scpic: "",
+        scorder: 0
+      },
+      addFormRules: {
+        scname: [
+          {
+            required: true,
+            message: "服务名称不能为空",
+            trigger: "blur"
+          }
+        ],
+        scorder: [
+          {
+            required: true,
+            message: "序号不能为空",
+            trigger: "blur"
+          }
+        ]
+      }
     };
   },
   mounted() {
+    this.userInfo = JSON.parse(localStorage.getItem("xhWebAdminUser"));
     console.log(this.form_search);
     this.init();
   },
@@ -142,6 +244,7 @@ export default {
             v.scpic = this.$api.showImageUrl + v.scpic;
             return v;
           });
+          this.service.total = res.obj.total;
         } else {
           this.$Message.error(res.msg);
         }
@@ -149,7 +252,78 @@ export default {
       });
     },
     add() {
-
+      this.add_form.show = true;
+      this.add_form.scorder = this.service.total + 1;
+    },
+    //确定添加
+    toSaveAdd() {
+      console.log(this.add_form);
+      this.$refs["AddForm"].validate((valid) => {
+        if (valid) {
+          if (!this.add_form.scpic) {
+            this.$Message.error("请上传图片");
+            return false;
+          }
+          sc_save({
+            scname: this.add_form.scname,
+            scpic: this.add_form.scpic,
+            ltype: this.form_search.ltype,
+            scorder: this.add_form.scorder,
+            createid: this.userInfo.userid
+          }).then((res) => {
+            if (res.code == 0) {
+              console.log(res);
+              this.add_form.show = false;
+              this.add_form.scname = "";
+              this.add_form.scpic = "";
+            } else {
+              this.$Message.error(res.msg);
+            }
+          });
+        }
+      });
+    },
+    handleUpload(file) {
+      let that = this;
+      let size = file.size / 1024 / 1024;
+      if (!file.name) {
+        return;
+      }
+      let str = file.name.split(".");
+      let suffix = str[str.length - 1];
+      if (suffix !== "png" && suffix !== "jpg" && suffix !== "jpeg") {
+        this.$Message.error("请上传png、jpg、jpeg类型的文件");
+        return false;
+      }
+      if (size > 10) {
+        this.$Message.error("图片太大，不能超过10M！");
+        return false;
+      }
+      let formData = new FormData();
+      formData.append("file", file);
+      formData.append("savefolder", "servicecase");
+      let url = that.$api.baseUrl + "file/upload";
+      that.showLoading = true;
+      axios
+        .post(url, formData, {
+          timeout: 1000 * window._config.axiosFileTimeout
+        })
+        .then((res) => {
+          that.showLoading = false;
+          if (res.data.code === 0) {
+            that.add_form.scpic = res.data.obj;
+            that.init();
+          } else {
+            that.$Message.error("图片上传失败");
+          }
+        })
+        .catch(() => {
+          that.showLoading = false;
+          that.$Message.error("图片上传失败");
+        });
+    },
+    changePage(page) {
+      console.log(page);
     }
   }
 };
@@ -173,4 +347,26 @@ export default {
   cursor: pointer;
   margin-top: 5px;
 }
+.upload {
+  margin-left: 90px;
+  width: 200px;
+  height: 100px;
+  border: 1px solid #dcdee2;
+  cursor: pointer;
+  &:hover {
+    color: #2d8cf0;
+    border: 1px solid #2d8cf0;
+    .upload-img,
+    .icon-shangchuan,
+    .shangchuan_btn {
+      color: inherit !important;
+    }
+  }
+  .upload-img {
+    width: 200px;
+    height: 100px;
+    text-align: center;
+    object-fit: cover;
+  }
+}
 </style>