xiugai

src/apirequest/article.js

@@ -0,0 +1,23 @@
+import axios from '@/apirequest/http';
+import base from './base'; // 导入接口域名列表
+import qs from 'qs'
+
+const article = {
+    // 新闻列表    
+    articleList(params) {
+        console.log('我是 文件中 api');
+        return axios.post(`${base.sq}/v1/get/group_data`, params);
+    },
+    articleDetail(id, params) {
+        return axios.get(`${base.sq}/topic/${id}`, {
+            params: params
+        });
+    },
+    // post提交    
+    login(params) {
+        return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));
+    }
+    // 其他接口…………
+}
+
+export default article;

src/apirequest/base.js

@@ -0,0 +1,5 @@
+const base = {
+    sq: 'https://xiaojieapi.com/api',    // http://api.wpbom.com/api/bution.php  
+    bd: 'http://xxxxx22222.com/api'
+}
+export default base;

src/apirequest/http.js

@@ -0,0 +1,88 @@
+import axios from 'axios';
+import store from '@/store/index';
+import { Message } from 'element-ui';
+import base from './base'; // 导入接口域名列表
+import QS from 'qs'
+// axios.defaults.baseURL = base.sq;
+axios.defaults.timeout = 60000;
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+axios.interceptors.request.use(
+    config => {
+        const token = store.state.token;
+        token && (config.headers.Authorization = token);
+        return config;
+    },
+    error => {
+        return Promise.error(error);
+    })
+
+
+axios.interceptors.response.use(
+    response => {
+
+        if (response.status === 200) {
+            return Promise.resolve(response);
+        } else {
+            return Promise.reject(response);
+        }
+    },
+    error => {
+        if (error.response.status) {
+            switch (error.response.status) {
+                case 401:
+                    Message.error("token失效，请重新登陆！");
+                    router.replace({
+                        path: '/login',
+                    });
+                    break;
+
+                case 404:
+                    Message({
+                        message: '网络请求不存在',
+                        duration: 1500,
+                        forbidClick: true
+                    });
+                    break;
+
+                default:
+                    Message({
+                        message: error.response.data.message,
+                        duration: 1500,
+                        forbidClick: true
+                    });
+            }
+            return Promise.reject(error.response);
+
+
+        }
+    })
+
+
+export default {
+    get(url, params) {
+        return new Promise((resolve, reject) => {
+            axios.get(url, {
+                params: params
+            })
+                .then(res => {
+                    resolve(res.data);
+                })
+                .catch(err => {
+                    reject(err.data)
+                })
+        });
+    },
+    post(url, params) {
+        console.log(url, params);
+        return new Promise((resolve, reject) => {
+            axios.post(url, QS.stringify(params))
+                .then(res => {
+                    console.log(res);
+                    resolve(res.data);
+                })
+                .catch(err => {
+                    reject(err.data)
+                })
+        });
+    }
+}

src/apirequest/index.js

@@ -0,0 +1,5 @@
+import article from '@/apirequest/article';
+
+export default {    
+    article,
+}

src/components/index.js

@@ -7,4 +7,5 @@ Vue.component('HelloWorld', () => import('../components/HelloWorld'));
 Vue.component('MyTable', () => import('../components/MyTable'));
 Vue.component('MyForm', () => import('@c/myform/MyForm.vue'))
 Vue.component('DynamicMenu', () => import('@c/dynamicmenu/DynamicMenu.vue'))
-
+Vue.component('MyTable', () => import('@c/mytable/MyTable.vue'))
+Vue.component('MyPop', () => import('@c/mypop/MyPop.vue'))

src/components/myform/MyForm.vue

@@ -1,23 +1,26 @@
 <template>
   <div>
     <el-form
-      ref="formData"
       :model="formValue"
-      label-width="80px"
+      ref="formData"
       :label-position="labelPosition"
       class="form-box"
       :rules="rules"
+      :inline="inline"
     >
-      <div v-for="(item, index) in formList" :key="index">
+      <template v-for="item in formList">
         <el-form-item
           v-if="item.type === 'input'"
           :label="item.label"
           :prop="item.prop"
         >
           <el-input
-            v-model="formValue[item.prop]"
+            v-model.trim="formValue[item.prop]"
             :style="{ width: `${item.width}` }"
             :placeholder="item.placeholder"
+            :type="item.style"
+            :show-password="item.style == 'password' ? true : false"
+            clearable
           ></el-input>
         </el-form-item>
 
@@ -38,9 +41,18 @@
             ></el-option>
           </el-select>
         </el-form-item>
-      </div>
+
+        <el-form-item
+          v-if="item.type === 'text'"
+          :label="item.label"
+          :prop="item.prop"
+        >
+          <span>{{ item.value }}</span>
+          <span>{{ item.value }}</span>
+        </el-form-item>
+      </template>
       <slot name="handle" :formData="formValue">
-        <el-button type="primary" @click="submitForm">提交</el-button>
+        <!-- <el-button type="primary" @click="submitForm">提交</el-button> -->
       </slot>
     </el-form>
   </div>
@@ -69,6 +81,13 @@ export default {
       },
     },
 
+    inline: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+
     labelPosition: {
       type: String,
       default: function () {
@@ -109,13 +128,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.form-box {
-  margin-top: 30px;
-}
-
-::v-deep .el-button {
-  font-size: 10px;
-  float: right;
-  margin-right: 50px;
-}
+// .form-box {
+//   margin-top: 30px;
+// }
 </style>

src/components/mypop/MyPop.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      :show-close="false"
+      :before-close="close"
+    >
+      <slot></slot>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "my-pop",
+  props: {
+    title: {
+      type: String,
+      default: function () {
+        return "aa";
+      },
+    },
+
+    dialogFormVisible: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    changeFialogFormVisible() {
+      return !this.dialogFormVisible;
+    },
+  },
+  methods: {
+    close() {
+      this.$emit("handleClose");
+    },
+  },
+
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  margin-top: 30px;
+}
+</style>

src/components/mytable/MyTable.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      highlight-current-row
+      element-loading-text="数据加载中..."
+      @selection-change="handlerSelectChange"
+      @select="handlerSelect"
+      @select-all="handlerSelectAll"
+    >
+      <el-table-column
+        label="序号"
+        v-if="hasIndex"
+        type="index"
+        align="center"
+        width="100"
+      >
+      </el-table-column>
+      <el-table-column
+        v-if="hasSelect"
+        type="selection"
+        width="38"
+      ></el-table-column>
+      <el-table-column v-if="hasExpand" type="expand" width="38">
+        <template slot-scope="props">
+          <my-form :formList="getList(props.row)"> </my-form>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in tableConfigArr"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        align="center"
+        :sortable="item.sortable"
+      >
+        <div slot-scope="scope">
+          <slot v-if="item.slot" :name="item.slot" :row="scope.row"> </slot>
+          <template v-else>
+            <div>{{ scope.row[item.prop] }}</div>
+          </template>
+        </div>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  name: "my-form",
+  props: {
+    tableData: {
+      type: Array,
+      require: true,
+      default: function () {
+        return [];
+      },
+    },
+    tableConfigArr: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    hasSelect: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    hasIndex: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    hasExpand: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+
+  data() {
+    return {
+      title: "变少",
+      dialogFormVisible: false,
+      
+    };
+  },
+  computed: {
+    getList() {
+      return function (data) {
+        let arr = [];
+        for (let i in data) {
+          let json = {};
+          json[i] = data[i];
+          json.type = "text";
+          arr.push(json);
+        }
+        return arr;
+      };
+    },
+  },
+
+  methods: {
+    handlerSelectAll(val) {
+      this.$emit("handlerSelectAll", val);
+    },
+    handlerSelect(value, obj) {
+      // 选中项
+      this.$emit("handlerSelect", value);
+    },
+    handlerSelectChange(value) {
+      this.$emit("handlerSelectChange", value);
+    },
+    edit(data) {
+      console.log(data, "122122");
+      this.dialogFormVisible = true;
+    },
+    deleteData(data) {
+      console.log(data, "000000");
+    },
+    handleSumbit(data) {
+      console.log(data, "我是子组件pop传来的");
+      this.dialogFormVisible = data;
+    },
+  },
+
+  mounted() {
+    console.log(this.tableConfigArr);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/element-variables.scss

@@ -3,7 +3,7 @@ Write your variables here. All available variables can be
 found in element-ui/packages/theme-chalk/src/common/var.scss.
 For example, to overwrite the theme color:
 */
-$--color-primary: teal;
+// $--color-primary: teal;
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';

src/main.js

@@ -8,6 +8,8 @@ import "./router/permission"
 import "./assets/css/index.scss"
 import './components/index.js'
 
+import api from '@/apirequest/index.js'
+Vue.prototype.$api = api;
 
 Vue.config.productionTip = false
 

src/pages/home/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        Home首页111
+        Home首页111ssss
     </div>
 </template>
 

src/pages/login/index.vue

@@ -20,7 +20,7 @@ export default {
     return {
       formList: [
         { type: "input", prop: "account", label: "姓名", width: "280px" },
-        { type: "input", prop: "password", label: "密码", width: "280px" },
+        { type: "input", prop: "password", label: "密码", width: "280px" ,style:'password' },
       ],
       formValue: {
         account: "",
@@ -60,4 +60,13 @@ export default {
     padding: 20px 20px 0 0;
   }
 }
+::v-deep .el-form {
+  margin-left: 30px !important;
+}
+
+::v-deep .el-button {
+  font-size: 10px;
+  float: right;
+  margin-right: 50px;
+}
 </style>

src/pages/order-manage/order-list/index.vue

@@ -1,13 +1,239 @@
 <template>
-    <div>
-       订单列表
-    </div>
+  <div>
+    <my-form :formValue="formValue" :formList="formList" :inline="true">
+      <template slot-scope="scope" slot="handle">
+        <el-button type="primary" @click="search(scope.formData)"
+          >搜索</el-button
+        >
+        <el-button type="primary" @click="add()">添加</el-button>
+      </template>
+    </my-form>
+    <!--   :hasIndex="hasIndex" -->
+    <my-table
+      :tableData="tableData"
+      :tableConfigArr="tableConfigArr"
+      :hasIndex="hasIndex"
+      @handlerSelectChange="handlerSelectChange"
+      @handlerSelect="handlerSelect"
+      @handlerSelectAll="handlerSelectAll"
+    >
+      <template slot-scope="scope" slot="operate">
+        <el-button type="primary" size="small" @click="edit(scope.row)"
+          >修改</el-button
+        >
+        <el-button type="primary" size="small" @click="deleteUser(scope.row)"
+          >删除</el-button
+        >
+      </template>
+      <template slot-scope="scope" slot="usrname">
+        <el-tag size="medium">{{ scope.row.name }}</el-tag>
+      </template>
+    </my-table>
+
+    <my-pop
+      :title="title"
+      :dialogFormVisible="dialogFormVisible"
+      @handleClose="handleClose"
+    >
+      <my-form :formValue="formValue1" :formList="formList1" class="form_box">
+      </my-form>
+      <div class="dialog-footer">
+        <slot name="footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button @click="confirm(formValue1)" type="primary"
+            >确定</el-button
+          >
+        </slot>
+      </div>
+    </my-pop>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {}
-    }
-}
+  data() {
+    return {
+      dialogFormVisible: false,
+      hasIndex: true,
+      title: "编辑",
+      //   hasExpand: true,
+      hasSelect: true,
+      formValue: {
+        name: "",
+        address: "",
+      },
+      formList: [
+        {
+          type: "input",
+          prop: "name",
+          label: "姓名:",
+        },
+        {
+          type: "input",
+          prop: "address",
+          label: "地址:",
+        },
+      ],
+
+      // 修改用
+      formValue1: {
+        name: "",
+        address: "",
+        date: "",
+      },
+      formList1: [
+        {
+          type: "input",
+          prop: "name",
+          label: "姓名:",
+        },
+        {
+          type: "input",
+          prop: "address",
+          label: "地址:",
+        },
+        {
+          type: "input",
+          prop: "date",
+          label: "时间:",
+        },
+      ],
+      tableData: [],
+      tableConfigArr: [
+        {
+          fixed: false,
+          prop: "date",
+          label: "日期",
+          sortable: true,
+        },
+        {
+          //   fixed: false,
+          //   prop: "name",
+          //   label: "名字",
+          slot: "usrname",
+          label: "名字",
+        },
+        {
+          fixed: false,
+          prop: "address",
+          label: "地址",
+          width: "300",
+        },
+        {
+          slot: "operate",
+          label: "操作",
+        },
+      ],
+
+      formInline: {
+        user: "",
+        region: "",
+      },
+    };
+  },
+
+  methods: {
+    handlerSelectChange(data) {
+      console.log(data, "handlerSelectChange");
+    },
+
+    handlerSelect(data) {
+      console.log(data, "handlerSelect");
+    },
+    handlerSelectAll(data) {
+      this.allSelect = data;
+    },
+
+    search(data) {
+      console.log(data, "搜索的数据");
+    },
+    edit(data) {
+      console.log(data, "改");
+      this.formValue1 = { ...this.formValue1, ...data };
+      this.dialogFormVisible = !this.dialogFormVisible;
+    },
+    add() {
+      this.formValue1 = {
+        name: "",
+        address: "",
+        date: "",
+      };
+      this.dialogFormVisible = !this.dialogFormVisible;
+    },
+    deleteUser(data) {
+      let index = this.tableData.findIndex((item) => {
+        return item.id == data.id;
+      });
+      this.tableData.splice(index, 1);
+    },
+    confirm(data) {
+      this.dialogFormVisible = !this.dialogFormVisible;
+      if (data.id) {
+        let index = this.tableData.findIndex((item) => {
+          return item.id == data.id;
+        });
+        console.log(index);
+        this.tableData.forEach((item) => {
+          this.$set(this.tableData, index, this.formValue1);
+        });
+
+        console.log(this.tableData, "变化了么");
+      } else {
+        let datas = {
+          ...data,
+          ...{ id: (this.tableData.length + 1).toString },
+        };
+        this.tableData.push(datas);
+      }
+    },
+
+    handleClose() {
+      this.dialogFormVisible = false;
+    },
+  },
+
+  created() {
+    this.tableData = [
+      {
+        id: "1",
+        date: "2016-05-02",
+        name: "王小虎",
+        address: "上海市普陀区金沙江路 1518ssds 弄",
+      },
+      {
+        id: "2",
+        date: "2016-05-04",
+        name: "利欧韵",
+        address: "上海市普陀区金沙江路 1517 弄",
+      },
+      {
+        id: "3",
+        date: "2016-05-01",
+        name: "王小虎",
+        address: "上海市普陀区金沙江路 1519 弄",
+      },
+      {
+        id: "4",
+        date: "2016-05-03",
+        name: "王小虎",
+        address: "上海市普陀区金沙江路 1516 弄",
+      },
+    ];
+  },
+};
 </script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.form_box {
+}
+
+::v-deep .el-form-item__content {
+  display: flex;
+  
+}
+</style>