Merge branch 'master' of http://git.cc-lotus.info/lrf402788946/llh_project

.project

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>llh_project</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1563956033907</id>
+			<name></name>
+			<type>26</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.multiFilter</id>
+				<arguments>1.0-name-matches-false-false-node_modules</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>

src/views/account/register.vue

@@ -1,16 +1,65 @@
 <template lang="html">
   <div id="register">
     <el-row class="register">
-      <el-col :span="24">
-        标题
+      <el-col :span="24" class="btn">
+        <el-col :span="20"><h3>账号注册</h3></el-col>
+        <el-col :span="4"><el-button type="success" icon="el-icon-plus">添加</el-button></el-col>
+        <el-col></el-col>
       </el-col>
-      <el-col :span="24">
-        搜索
+      <el-col :span="24" class="search">
+        <el-col :span="3" class="searchSel">
+          <el-select v-model="value" placeholder="请选择">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
       </el-col>
-      <el-col :span="24">
-        列表
+      <el-col :span="24" class="list">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          row-key="id"
+          border
+          lazy
+          :load="load"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        >
+          <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+          <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+          <el-table-column prop="address" label="地址"> </el-table-column>
+          <el-table-column prop="state" label="状态">
+            <template v-slot="scope">
+              {{ scope.row.state === '0' ? '已冻结' : '使用中' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" @click="openDialog(scope.$index)">修改</el-button>
+              <el-button size="mini" type="danger" @click="open">注销</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-col>
     </el-row>
+    <el-dialog title="编辑账号" :visible.sync="editFormVisible">
+      <el-form :model="editForm" label-width="80px" ref="editForm">
+        <el-form-item label="日期" prop="date">
+          <el-input v-model="editForm.date"></el-input>
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="editForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="editForm.address"></el-input>
+        </el-form-item>
+        <el-table-column label="状态" prop="state"> </el-table-column>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click.native="handleCancel()">取消</el-button>
+        <el-button type="primary" @click.native="handleEdit()">保存</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -19,16 +68,166 @@ export default {
   name: 'register',
   props: {},
   components: {},
-  data: () => ({}),
+  data: () => ({
+    options: [
+      {
+        value: '1',
+        label: '1',
+      },
+      {
+        value: '2',
+        label: '2',
+      },
+      {
+        value: '3',
+        label: '3',
+      },
+      {
+        value: '4',
+        label: '4',
+      },
+      {
+        value: '5',
+        label: '5',
+      },
+    ],
+    value: '',
+    input: '',
+    tableData: [
+      {
+        id: 1,
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        state: '0',
+      },
+      {
+        id: 2,
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄',
+        state: '1',
+      },
+      {
+        id: 3,
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄',
+        state: '0',
+        hasChildren: true,
+      },
+      {
+        id: 4,
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄',
+        state: '0',
+      },
+    ],
+    editForm: {
+      date: '',
+      name: '',
+      address: '',
+      state: '',
+    },
+    editFormVisible: false,
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    load(tree, treeNode, resolve) {
+      setTimeout(() => {
+        resolve([
+          {
+            id: 31,
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+            state: '1',
+          },
+          {
+            id: 32,
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+            state: '0',
+          },
+        ]);
+      }, 1000);
+    },
+    open() {
+      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除',
+          });
+        });
+    },
+    openDialog(index) {
+      this.editFormVisible = true;
+      let data = JSON.parse(JSON.stringify(this.tableData[index]));
+      data[`index`] = index;
+      this.$set(this, `editForm`, data);
+    },
+    handleEdit() {
+      let newData = this.editForm;
+      const { index, ...form } = newData;
+      console.log(index, form);
+      this.$set(this.tableData, `${index}`, form);
+      this.$message.success('修改成功');
+      this.handleCancel();
+    },
+    handleCancel() {
+      this.editForm = {};
+      this.editFormVisible = false;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
 .register {
   width: 100%;
   padding: 20px;
 }
+.btn {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px 0;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 20px 0;
+}
+.searchSel .el-select {
+  border-radius: 0;
+}
+/deep/.searchInp .el-input__inner {
+  border-radius: 0;
+}
+.searchBtn .el-button {
+  border-radius: 0;
+}
 </style>