Browse Source

fix: innerEditList zhCN lang

Sendya 6 years ago
parent
commit
182bd1c3b3

+ 67 - 67
src/components/layout/PageView.vue

@@ -1,68 +1,68 @@
-<template>
-  <page-layout :desc="description" :title="getTitle" :link-list="linkList">
-    <div slot="extra" class="extra-img">
-      <img :src="extraImage"/>
-    </div>
-    <!-- keep-alive  -->
-    <route-view ref="content"></route-view>
-  </page-layout>
-</template>
-
-<script>
-  import PageLayout from './PageLayout'
-  import RouteView from './RouteView'
-
-  export default {
-    name: "PageContent",
-    components: {
-      RouteView,
-      PageLayout
-    },
-    data () {
-      return {
-        title: '',
-        description: '',
-        linkList: [],
-        extraImage: ''
-      }
-    },
-    mounted () {
-      this.getPageHeaderInfo()
-    },
-    updated () {
-      this.getPageHeaderInfo()
-    },
-    computed: {
-
-      getTitle () {
-        return this.$route.meta.title
-      }
-
-    },
-    methods: {
-      getPageHeaderInfo () {
-        // eslint-disable-next-line
-        this.title = this.$route.meta.title
-        // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
-        const content = this.$refs.content.$children[0]
-        if (content) {
-          this.description = content.description
-          this.linkList = content.linkList
-          this.extraImage = content.extraImage
-        }
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-    .extra-img{
-        margin-top: -60px;
-        text-align: center;
-        width: 195px;
-
-        img{
-            width: 100%;
-        }
-    }
+<template>
+  <page-layout :desc="description" :title="getTitle" :link-list="linkList">
+    <div slot="extra" class="extra-img">
+      <img :src="extraImage"/>
+    </div>
+    <!-- keep-alive  -->
+    <route-view ref="content"></route-view>
+  </page-layout>
+</template>
+
+<script>
+  import PageLayout from './PageLayout'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "PageContent",
+    components: {
+      RouteView,
+      PageLayout
+    },
+    data () {
+      return {
+        title: '',
+        description: '',
+        linkList: [],
+        extraImage: ''
+      }
+    },
+    mounted () {
+      this.getPageHeaderInfo()
+    },
+    updated () {
+      this.getPageHeaderInfo()
+    },
+    computed: {
+
+      getTitle () {
+        return this.$route.meta.title
+      }
+
+    },
+    methods: {
+      getPageHeaderInfo () {
+        // eslint-disable-next-line
+        this.title = this.$route.meta.title
+        // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
+        const content = this.$refs.content && this.$refs.content.$children[0]
+        if (content) {
+          this.description = content.description
+          this.linkList = content.linkList
+          this.extraImage = content.extraImage
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+    .extra-img{
+        margin-top: -60px;
+        text-align: center;
+        width: 195px;
+
+        img{
+            width: 100%;
+        }
+    }
 </style>

+ 74 - 74
src/views/exception/ExceptionPage.vue

@@ -1,75 +1,75 @@
-<template>
-  <div class="exception">
-    <div class="img">
-      <img :src="config[type].img"/>
-    </div>
-    <div class="content">
-      <h1>{{ config[type].title }}</h1>
-      <div class="desc">{{ config[type].desc }}</div>
-      <div class="action">
-        <a-button type="primary" @click="handleToHome">返回首页</a-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import types from './type'
-
-  export default {
-    name: "Exception",
-    props: {
-      type: {
-        type: Number,
-        default: 404
-      }
-    },
-    data() {
-      return {
-        config: types
-      }
-    },
-    methods: {
-      handleToHome () {
-        this.$router.push({ name: 'dashboard' })
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .exception {
-    min-height: 500px;
-    height: 80%;
-    align-items: center;
-    text-align: center;
-    margin-top: 150px;
-    .img {
-      display: inline-block;
-      padding-right: 52px;
-      zoom: 1;
-      img {
-        height: 360px;
-        max-width: 430px;
-      }
-    }
-    .content {
-      display: inline-block;
-      flex: auto;
-      h1 {
-        color: #434e59;
-        font-size: 72px;
-        font-weight: 600;
-        line-height: 72px;
-        margin-bottom: 24px;
-      }
-      .desc {
-        color: rgba(0, 0, 0, .45);
-        font-size: 20px;
-        line-height: 28px;
-        margin-bottom: 16px;
-      }
-    }
-  }
-
+<template>
+  <div class="exception">
+    <div class="img">
+      <img :src="config[type].img"/>
+    </div>
+    <div class="content">
+      <h1>{{ config[type].title }}</h1>
+      <div class="desc">{{ config[type].desc }}</div>
+      <div class="action">
+        <a-button type="primary" @click="handleToHome">返回首页</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import types from './type'
+
+  export default {
+    name: "Exception",
+    props: {
+      type: {
+        type: String,
+        default: '404'
+      }
+    },
+    data() {
+      return {
+        config: types
+      }
+    },
+    methods: {
+      handleToHome () {
+        this.$router.push({ name: 'dashboard' })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .exception {
+    min-height: 500px;
+    height: 80%;
+    align-items: center;
+    text-align: center;
+    margin-top: 150px;
+    .img {
+      display: inline-block;
+      padding-right: 52px;
+      zoom: 1;
+      img {
+        height: 360px;
+        max-width: 430px;
+      }
+    }
+    .content {
+      display: inline-block;
+      flex: auto;
+      h1 {
+        color: #434e59;
+        font-size: 72px;
+        font-weight: 600;
+        line-height: 72px;
+        margin-bottom: 24px;
+      }
+      .desc {
+        color: rgba(0, 0, 0, .45);
+        font-size: 20px;
+        line-height: 28px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
 </style>

+ 252 - 245
src/views/list/TableInnerEditList.vue

@@ -1,246 +1,253 @@
-<template>
-  <a-card :bordered="false">
-    <div :class="advanced ? 'search' : null">
-      <a-form layout="horizontal">
-        <div :class="advanced ? null : 'fold'">
-          <a-row :gutter="48">
-            <a-col :md="8" :sm="24">
-              <a-form-item
-                label="规则编号"
-                :labelCol="{span: 5}"
-                :wrapperCol="{span: 18, offset: 1}"
-              >
-                <a-input placeholder="请输入"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item
-                label="使用状态"
-                :labelCol="{span: 5}"
-                :wrapperCol="{span: 18, offset: 1}"
-              >
-                <a-select placeholder="请选择">
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item
-                label="调用次数"
-                :labelCol="{span: 5}"
-                :wrapperCol="{span: 18, offset: 1}"
-              >
-                <a-input-number style="width: 100%" placeholder="请输入"/>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-row :gutter="48" v-if="advanced">
-            <a-col :md="8" :sm="24">
-              <a-form-item
-                label="更新日期"
-                :labelCol="{span: 5}"
-                :wrapperCol="{span: 18, offset: 1}">
-                <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item
-                label="使用状态"
-                :labelCol="{span: 5}"
-                :wrapperCol="{span: 18, offset: 1}">
-                <a-select placeholder="请选择">
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item
-                label="描述"
-                :labelCol="{span: 5}"
-                :wrapperCol="{span: 18, offset: 1}"
-              >
-                <a-input placeholder="请输入"/>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </div>
-
-        <span style="float: right; margin-top: 3px;">
-          <a-button type="primary">查询</a-button>
-          <a-button style="margin-left: 8px">重置</a-button>
-          <a @click="toggleAdvanced" style="margin-left: 8px">
-            {{ advanced ? '收起' : '展开' }}
-            <a-icon :type="advanced ? 'up' : 'down'"/>
-          </a>
-        </span>
-      </a-form>
-    </div>
-
-    <s-table
-      ref="table"
-      size="default"
-      :columns="columns"
-      :data="loadData"
-      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
-    >
-      <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
-        <div :key="index">
-          <a-input
-            v-if="record.editable"
-            style="margin: -5px 0"
-            :value="text"
-            @change="e => handleChange(e.target.value, record.key, col)"
-          />
-          <template v-else>{{ text }}</template>
-        </div>
-      </template>
-      <template slot="action" slot-scope="text, record, index">
-        <div class='editable-row-operations'>
-          <span v-if="record.editable">
-            <a @click="() => save(record)" style="margin-right: 12px">Save</a>
-            <a-popconfirm title='Sure to cancel?' @confirm="() => cancel(record)">
-              <a>Cancel</a>
-            </a-popconfirm>
-          </span>
-          <span v-else>
-            <a @click="() => edit(record, index)">Edit</a>
-          </span>
-        </div>
-      </template>
-    </s-table>
-
-  </a-card>
-</template>
-
-<script>
-  import STable from '@/components/table/'
-
-  export default {
-    name: "TableList",
-    components: {
-      STable
-    },
-    data () {
-      return {
-        // 高级搜索 展开/关闭
-        advanced: false,
-        // 查询参数
-        queryParam: {},
-        // 表头
-        columns: [
-          {
-            title: '规则编号',
-            dataIndex: 'no'
-          },
-          {
-            title: '描述',
-            dataIndex: 'description',
-            scopedSlots: { customRender: 'description' },
-          },
-          {
-            title: '服务调用次数',
-            dataIndex: 'callNo',
-            sorter: true,
-            needTotal: true,
-            scopedSlots: { customRender: 'callNo' },
-            // customRender: (text) => text + ' 次'
-          },
-          {
-            title: '状态',
-            dataIndex: 'status',
-            needTotal: true,
-            scopedSlots: { customRender: 'status' },
-          },
-          {
-            title: '更新时间',
-            dataIndex: 'updatedAt',
-            sorter: true,
-            scopedSlots: { customRender: 'updatedAt' },
-          },
-          {
-            table: '操作',
-            dataIndex: 'action',
-            width: '150px',
-            scopedSlots: { customRender: 'action' },
-          }
-        ],
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          return this.$http.get('/service', {
-            params: Object.assign(parameter, this.queryParam)
-          }).then(res => {
-            return res.result
-          })
-        },
-
-        selectedRowKeys: [],
-        selectedRows: []
-      }
-    },
-    methods: {
-
-      handleChange (value, key, column) {
-        console.log(value, key, column)
-      },
-      edit (row) {
-        row.editable = true
-        row = Object.assign({}, row)
-        this.$refs.table.updateEdit()
-      },
-      save (row) {
-        delete row.editable
-        this.$refs.table.updateEdit()
-      },
-      cancel (row) {
-        delete row.editable
-        this.$refs.table.updateEdit()
-      },
-
-      onChange (selectedRowKeys, selectedRows) {
-        this.selectedRowKeys = selectedRowKeys
-        this.selectedRows = selectedRows
-      },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      },
-    },
-    watch: {
-      /*
-      'selectedRows': function (selectedRows) {
-        this.needTotalList = this.needTotalList.map(item => {
-          return {
-            ...item,
-            total: selectedRows.reduce( (sum, val) => {
-              return sum + val[item.dataIndex]
-            }, 0)
-          }
-        })
-      }
-      */
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .search {
-    margin-bottom: 54px;
-  }
-
-  .fold {
-    width: calc(100% - 216px);
-    display: inline-block
-  }
-
-  .operator {
-    margin-bottom: 18px;
-  }
-
-  @media screen and (max-width: 900px) {
-    .fold {
-      width: 100%;
-    }
-  }
+<template>
+  <a-card :bordered="false">
+    <div :class="advanced ? 'search' : null">
+      <a-form layout="horizontal">
+        <div :class="advanced ? null : 'fold'">
+          <a-row :gutter="48">
+            <a-col :md="8" :sm="24">
+              <a-form-item
+                label="规则编号"
+                :labelCol="{span: 5}"
+                :wrapperCol="{span: 18, offset: 1}"
+              >
+                <a-input placeholder="请输入"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item
+                label="使用状态"
+                :labelCol="{span: 5}"
+                :wrapperCol="{span: 18, offset: 1}"
+              >
+                <a-select placeholder="请选择">
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item
+                label="调用次数"
+                :labelCol="{span: 5}"
+                :wrapperCol="{span: 18, offset: 1}"
+              >
+                <a-input-number style="width: 100%" placeholder="请输入"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="48" v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item
+                label="更新日期"
+                :labelCol="{span: 5}"
+                :wrapperCol="{span: 18, offset: 1}">
+                <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item
+                label="使用状态"
+                :labelCol="{span: 5}"
+                :wrapperCol="{span: 18, offset: 1}">
+                <a-select placeholder="请选择">
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item
+                label="描述"
+                :labelCol="{span: 5}"
+                :wrapperCol="{span: 18, offset: 1}"
+              >
+                <a-input placeholder="请输入"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+
+        <span style="float: right; margin-top: 3px;">
+          <a-button type="primary">查询</a-button>
+          <a-button style="margin-left: 8px">重置</a-button>
+          <a @click="toggleAdvanced" style="margin-left: 8px">
+            {{ advanced ? '收起' : '展开' }}
+            <a-icon :type="advanced ? 'up' : 'down'"/>
+          </a>
+        </span>
+      </a-form>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      :columns="columns"
+      :data="loadData"
+      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
+    >
+      <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
+        <div :key="index">
+          <a-input
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            @change="e => handleChange(e.target.value, record.key, col)"
+          />
+          <template v-else>{{ text }}</template>
+        </div>
+      </template>
+      <template slot="action" slot-scope="text, record, index">
+        <div class='editable-row-operations'>
+          <span v-if="record.editable">
+            <a @click="() => save(record)">保存</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title='真的放弃编辑吗?' @confirm="() => cancel(record)">
+              <a>取消</a>
+            </a-popconfirm>
+          </span>
+          <span v-else>
+            <a @click="() => edit(record, index)">修改</a>
+            <a-divider type="vertical" />
+            <a @click="() => delete(record, index)">删除</a>
+          </span>
+        </div>
+      </template>
+    </s-table>
+
+  </a-card>
+</template>
+
+<script>
+  import STable from '@/components/table/'
+
+  export default {
+    name: "TableList",
+    components: {
+      STable
+    },
+    data () {
+      return {
+        // 高级搜索 展开/关闭
+        advanced: false,
+        // 查询参数
+        queryParam: {},
+        // 表头
+        columns: [
+          {
+            title: '规则编号',
+            dataIndex: 'no',
+            width: 90
+          },
+          {
+            title: '描述',
+            dataIndex: 'description',
+            scopedSlots: { customRender: 'description' },
+          },
+          {
+            title: '服务调用次数',
+            dataIndex: 'callNo',
+            width: '150px',
+            sorter: true,
+            needTotal: true,
+            scopedSlots: { customRender: 'callNo' },
+            // customRender: (text) => text + ' 次'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            width: '120px',
+            needTotal: true,
+            scopedSlots: { customRender: 'status' },
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'updatedAt',
+            width: '180px',
+            sorter: true,
+            scopedSlots: { customRender: 'updatedAt' },
+          },
+          {
+            table: '操作',
+            dataIndex: 'action',
+            width: '150px',
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return this.$http.get('/service', {
+            params: Object.assign(parameter, this.queryParam)
+          }).then(res => {
+            return res.result
+          })
+        },
+
+        selectedRowKeys: [],
+        selectedRows: []
+      }
+    },
+    methods: {
+
+      handleChange (value, key, column) {
+        console.log(value, key, column)
+      },
+      edit (row) {
+        row.editable = true
+        row = Object.assign({}, row)
+        this.$refs.table.updateEdit()
+      },
+      save (row) {
+        delete row.editable
+        this.$refs.table.updateEdit()
+      },
+      cancel (row) {
+        delete row.editable
+        this.$refs.table.updateEdit()
+      },
+
+      onChange (selectedRowKeys, selectedRows) {
+        this.selectedRowKeys = selectedRowKeys
+        this.selectedRows = selectedRows
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      },
+    },
+    watch: {
+      /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
 </style>