U 新建工单 工单列表

he wei

2021-11-02 4964aa7f82cf72c08cb1cf357b975d0122d73e5e

U 新建工单 工单列表

 package-lock.json

@@ -1687,6 +1687,16 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1713,6 +1723,53 @@
            "unique-filename": "^1.1.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz",
          "integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1727,6 +1784,16 @@
          "requires": {
            "figgy-pudding": "^3.5.1",
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "terser-webpack-plugin": {
@@ -1744,6 +1811,18 @@
            "source-map": "^0.6.1",
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.2",
          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
          "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -2520,16 +2599,6 @@
      "integrity": "sha1-MPpAyef+B9vIlWeM0ocCTeokHdk=",
      "dev": true,
      "optional": true
    },
    "bindings": {
      "version": "1.5.0",
      "resolved": "https://registry.npm.taobao.org/bindings/download/bindings-1.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbindings%2Fdownload%2Fbindings-1.5.0.tgz",
      "integrity": "sha1-EDU8npRTNLwFEabZCzj7x8nFBN8=",
      "dev": true,
      "optional": true,
      "requires": {
        "file-uri-to-path": "1.0.0"
      }
    },
    "bluebird": {
      "version": "3.7.2",
@@ -5023,13 +5092,6 @@
        "schema-utils": "^2.5.0"
      }
    },
    "file-uri-to-path": {
      "version": "1.0.0",
      "resolved": "https://registry.npm.taobao.org/file-uri-to-path/download/file-uri-to-path-1.0.0.tgz",
      "integrity": "sha1-VTp7hEb/b2hDWcRF8eN6BdrMM90=",
      "dev": true,
      "optional": true
    },
    "filesize": {
      "version": "3.6.1",
      "resolved": "https://registry.npm.taobao.org/filesize/download/filesize-3.6.1.tgz",
@@ -5222,8 +5284,8 @@
    },
    "fsevents": {
      "version": "2.1.3",
      "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-2.1.3.tgz?cache=0&sync_timestamp=1604593363910&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.1.3.tgz",
      "integrity": "sha1-+3OHA66NL5/pAMM4Nt3r7ouX8j4=",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
      "dev": true,
      "optional": true
    },
@@ -7033,13 +7095,6 @@
        "object-assign": "^4.0.1",
        "thenify-all": "^1.0.0"
      }
    },
    "nan": {
      "version": "2.14.2",
      "resolved": "https://registry.npm.taobao.org/nan/download/nan-2.14.2.tgz?cache=0&sync_timestamp=1602591709094&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnan%2Fdownload%2Fnan-2.14.2.tgz",
      "integrity": "sha1-9TdkAGlRaPTMaUrJOT0MlYXu6hk=",
      "dev": true,
      "optional": true
    },
    "nanomatch": {
      "version": "1.2.13",
@@ -10453,87 +10508,6 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.2",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
      "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-router": {
      "version": "3.4.9",
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347284428&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",
@@ -10658,14 +10632,10 @@
        },
        "fsevents": {
          "version": "1.2.13",
          "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-1.2.13.tgz?cache=0&sync_timestamp=1604593363910&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-1.2.13.tgz",
          "integrity": "sha1-8yXLBFVZJCi88Rs4M3DvcOO/zDg=",
          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
          "dev": true,
          "optional": true,
          "requires": {
            "bindings": "^1.5.0",
            "nan": "^2.12.1"
          }
          "optional": true
        },
        "glob-parent": {
          "version": "3.1.0",
@@ -10973,14 +10943,10 @@
        },
        "fsevents": {
          "version": "1.2.13",
          "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-1.2.13.tgz?cache=0&sync_timestamp=1604593363910&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-1.2.13.tgz",
          "integrity": "sha1-8yXLBFVZJCi88Rs4M3DvcOO/zDg=",
          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
          "dev": true,
          "optional": true,
          "requires": {
            "bindings": "^1.5.0",
            "nan": "^2.12.1"
          }
          "optional": true
        },
        "glob-parent": {
          "version": "3.1.0",

 src/assets/css/reset.css

@@ -65,7 +65,7 @@
nav,
section {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 28px;
    /* font-size: 28px; */
    box-sizing: border-box;
}


 src/components/FlexLayout.vue

New file
@@ -0,0 +1,69 @@
<template>
    <div class="flex-layout" :class=getRootClass :style="getRootStyle">
        <div class="flex-layout-header">
            <slot name="header"></slot>
        </div>
        <div class="flex-layout-body" :class="{'no-bg': noBg}">
            <slot></slot>
        </div>
        <div class="flex-layout-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        direction: {
            type: String,
            default: '',
        },
        height: {
            type: String,
            default: "100%",
        },
        noBg: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        getRootClass: function() {
            return {
               'direction-row':  this.direction == 'row'?true: false
            };
        },
        getRootStyle: function() {
            return {
                'height': this.height,
            }
        },
    }
}
</script>

<style scoped>
.flex-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.flex-layout.direction-row {
    flex-direction: row;
}
.flex-layout.full-ht {
    height: 100%;
}

.flex-layout-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}
.flex-layout-body.no-bg {
    background-color: #05227200;
}
</style>



 src/components/listCard.vue

New file
@@ -0,0 +1,142 @@
<template>
  <div class="list-card">
    <!-- 头部行 点击事件 -->
    <div class="order-info"
      @click="itemClick"
      title="点击查看详情"
    >
      <div class="">
        <span>工单编号:123</span>
        <span>工单生成时间:12233</span>
      </div>
      <div class="timer">处理时限:3333</div>
    </div>
    <!-- 内容 -->
    <div class="contain">
      <div class="item order-title">
        <div class="inner">
          <div class="title">工单标题</div>
          <div class="content">机房告警</div>
        </div>
      </div>
      <div class="item order-content">
        <div class="inner">
          <div class="title">告警内容</div>
          <div class="content">内部错误,内部错误,内部错误,内部错误,内部错误内部错误,内部错误,内部错误,内部错误,内部错误内部错误,内部错误,内部错误,内部错误,内部错误</div>
        </div>
      </div>
      <div class="item">
        <div class="inner">
          <div class="title">当前处理环节</div>
          <div class="content strong">T1处理中</div>
        </div>
      </div>
      <div class="item">
        <div class="inner">
          <div class="title">告警是否清除</div>
          <div class="content strong">未清除</div>
        </div>
      </div>
      <div class="item">
        <div class="inner">
          <div class="state">待处理</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default () {
        return {

        }
      }
    }
  },
  methods: {
    itemClick () {
      this.$emit('itemclick', this.data);
    }
  }
};
</script>

<style scoped>
  .list-card {
    border: 1px #ababab solid;
    background: #f3f4f6;;
  }
  .order-info {
    color: #04409a;
    padding: 4px 1.6em;
    border-bottom: 1px #ababab solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .order-info span {
    font-size: 20px;
    padding-right: 2em;
  }
  .timer {
    color: #ababab;
    font-size: 16px;
  }
  .contain {
    display: flex;
    flex-direction: row;
  }
  .item {
    flex: 1;
    border-right: 1px solid #ababab;
    padding: 0.8em 4px;
    text-align: center;
    display: flex;
    align-items: center;
  }
  .inner {
    flex: 1;
  }
  .order-title {
    flex: 1.6;
    align-items: left;
  }
  .order-content .inner,
  .order-title .inner {
    padding: 0 1.4em;
    text-align: left;
  }
  .order-content {
    flex: 2.2;
  }
  .order-title .content,
  .order-content .content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .item .inner > * {
    font-size: 18px;
  }
  .item:last-of-type {
    border-right: 0 none;
  }
  .item .strong,
  .item .title {
    color: #000;
    font-weight: bolder;
  }
  .item .state {
    color: #ed1c24;
    font-weight: bolder;
  }
</style>



 src/main.js

@@ -8,6 +8,11 @@
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import FlexLayout from './components/FlexLayout.vue'

// 注册全局自定义组件
Vue.component("FlexLayout", FlexLayout);

Vue.config.productionTip = false

Vue.prototype.$axios = axios;

 src/pages/alarmWork/addWork.vue

@@ -1,18 +1,120 @@
<template>
    <div class="">
        新建工单
    </div>
  <div class="main">
    <div class="contain">
      <div class="title">新建工单</div>
      <el-form ref="form" :model="form" label-width="10em">
        <el-form-item label="工单标题:">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="告警描述:">
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="请输入内容"
            :rows="4"
            maxlength="150"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="告警发生时间:">
          <el-date-picker
            v-model="form.datetime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="告警级别:">
          <el-select v-model="form.level" placeholder="请选择">
            <el-option label="一级" value="1"></el-option>
            <el-option label="二级" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="附件:">
          <el-upload
            class="upload-demo"
            action="/posts/"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="T1处理组:">
          <el-select v-model="form.operate" placeholder="请选择">
            <el-option label="一组" value="1"></el-option>
            <el-option label="二组" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
}
export default {
  name: "",

  data () {
    return {
      form: {
        title: "",
        desc: "",
        datetime: "",
        level: 0,
        fileList: [],
        operate: 0,
      },
    };
  },
  components: {},
  methods: {
    onSubmit () {
      console.log('新建工单');
    },
    beforeRemove () {
      console.log('是否删除。。。');
    },
    handleExceed () {
      console.log('文件个数超过上限');
    }
  },

  mounted () {},
};
</script>

<style scoped>
</style>
.main {
  height: 100%;
  padding-top: 10px;
  padding-left: 10px;
  display: flex;
}
.contain {
  background: #fff;
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.title {
  color: #04409a;
  font-size: 24px;
}
>>> .el-input {
  width: 30em;
}
>>> .el-textarea {
  width: 40em;
}
</style>

 src/pages/alarmWork/list.vue

@@ -1,34 +1,190 @@
<template>
    <div class="">
        <div v-if="unitType==1">
            待处理工单
        </div>
        <div v-if="unitType==2">
            已处理工单
        </div>
    </div>

  <flex-layout class="main">
    <!-- 搜索 -->
    <div slot="header" class="contain-search">
      <flex-layout direction="row">
        <el-row :gutter="20">
          <el-col :span="12">
            <label>
              <span class="label">标题内容:</span>
              <el-input v-model="title" size="small" placeholder="请输入关键词"></el-input>
            </label>
          </el-col>
          <el-col :span="12">
            <label>
              <span class="label">选择时间:</span>
              <el-date-picker
                v-model="datetime"
                type="daterange"
                size="small"
                range-separator=" ~ "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </label>
          </el-col>
        </el-row>
        <div class="" slot="footer">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </div>
      </flex-layout>
    </div>
    <!-- 列表 -->
    <flex-layout class="list-contain">
      <div class="scroll">
        <list-card
          class="list-item"
          v-for="(item, idx) in list"
          :key="'list_' + idx"
          @itemclick="details"
          :data="item"
        ></list-card>
      </div>
      <!-- 分页 -->
      <div class="pagination" slot="footer">
        <el-button type="primary" size="mini" icon="el-icon-arrow-left">上一页</el-button>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
        <el-button type="primary" size="mini" icon="el-icon-arrow-right">下一页</el-button>
      </div>
    </flex-layout>
  </flex-layout>
</template>

<script>
import FlexLayout from "@/components/FlexLayout.vue";
import ListCard from "@/components/listCard.vue";

let list = [
  {
    a: 1
  },
  {
    a: 2
  },
  {
    a: 1
  },
  {
    a: 2
  },{
    a: 1
  },
  {
    a: 2
  }
];
export default {
    data() {
        return {
            unitType: 1
            unitType: 1,
      title: "",
      desc: "",
      datetime: "",
      level: 0,
      fileList: [],
      operate: 0,
      list: [],
      page: {
        currentPage: 1,
        pageSizes: [1, 5, 10, 20],
        pageSize: 5,
        total: 0
      }
        }
    },
  components: {
    FlexLayout
    ,ListCard
  },
    watch: {
        '$route'() {
            // 监听路由变化，获取unitType
            this.unitType = this.$route.meta.unitType
        },
    },
  methods: {
    details (data) {
      console.log(data);
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    }
  },
    mounted() {
        this.unitType = this.$route.meta.unitType
    this.unitType = this.$route.meta.unitType
    this.list = list;
    }

}
</script>

<style scoped>
</style>
.contain-search {
  background: #fff;
  border-bottom: 1px solid #c4c4c4;
  margin-bottom: 16px;
  padding: 16px 10px;
}
.contain-search span.label {
  font-size: 18px;
  font-weight: bold;
  color: #666;
  padding-right: 1em;
}
.list-contain {
  background: #fff;
  height: 100%;
  margin-left: 16px;
  border-top: 1px #c4c4c4 solid;
  border-left: 1px #c4c4c4 solid;
  padding: 30px 0 10px 30px;
}
.scroll {
  overflow-y: auto;
  padding-right: 30px;
}
.title {
  color: #04409a;
  font-size: 24px;
}
.list-item {
  margin-bottom: 18px;
}
.pagination {
  display: flex;
  padding-top: 10px;
  justify-content: center;
}
>>> .el-pagination {
  display: flex;
  padding: 0 1em;
}
>>> .el-pagination .el-input__inner {
  background: #343345;
  color: #fff;
}
>>> .el-input {
  width: 30em;
}
>>> .el-textarea {
  width: 40em;
}
>>> .el-select .el-input {
  width: 16em;
}
>>> .el-pagination .el-input {
  width: auto;
}
</style>

 src/pages/test.vue

New file
@@ -0,0 +1,99 @@
<template>
  <flex-layout>
    <!-- 搜索 -->
    <div slot="header" class="contain-search">
      <flex-layout direction="row">
        <el-row :gutter="20">
          <el-col :span="12">
            <label>
              <span>标题内容:</span>
              <el-input v-model="title" placeholder="请输入关键词"></el-input>
            </label>
          </el-col>
          <el-col :span="12">
            <label>
              <span>选择时间:</span>
              <el-date-picker
                v-model="datetime"
                type="daterange"
                range-separator=" ~ "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </label>
          </el-col>
        </el-row>
        <div class="" slot="footer">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </div>
      </flex-layout>
    </div>
    <!-- 列表 -->
    <div class="">
      <list-card
        v-for="(item, idx) in list"
        :key="'list_' + idx"
        @itemclick="details"
        :data="item"
      ></list-card>
    </div>
    <!-- 分页 -->
    <div class="" slot="footer">1</div>
  </flex-layout>
</template>

<script>
import FlexLayout from "@/components/FlexLayout.vue";
import ListCard from "@/components/listCard.vue";

let list = [
  {
    a: 1
  },
  {
    a: 2
  }
];
export default {
  name: "",

  data() {
    return {
        title: "",
        desc: "",
        datetime: "",
        level: 0,
        fileList: [],
        operate: 0,
        list: [],
    };
  },
  components: {
    FlexLayout
    ,ListCard
  },
  methods: {
    details (data) {
      console.log(data);
    }
  },

  mounted() {
    this.list = list;
  },
};
</script>

<style scoped>
.title {
  color: #04409a;
  font-size: 24px;
}
>>> .el-input {
  width: 30em;
}
>>> .el-textarea {
  width: 40em;
}
</style>

 src/pages/test1.vue

New file
@@ -0,0 +1,108 @@
<template>
  <div class="contain">
    <div class="title">新建工单</div>
    <el-form ref="form" :model="form" label-width="10em">
      <el-form-item label="工单标题:">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="告警描述:">
        <el-input
          type="textarea"
          v-model="form.desc"
          placeholder="请输入内容"
          :rows="4"
          maxlength="150"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="告警发生时间:">
        <el-date-picker
          v-model="form.datetime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="告警级别:">
        <el-select v-model="form.level" placeholder="请选择">
          <el-option label="一级" value="1"></el-option>
          <el-option label="二级" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="附件:">
        <el-upload
          class="upload-demo"
          action="/posts/"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="T1处理组:">
        <el-select v-model="form.operate" placeholder="请选择">
          <el-option label="一组" value="1"></el-option>
          <el-option label="二组" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "",

  data () {
    return {
      form: {
        title: "",
        desc: "",
        datetime: "",
        level: 0,
        fileList: [],
        operate: 0,
      },
    };
  },
  components: {},
  methods: {
    onSubmit () {
      console.log('新建工单');
    },
    beforeRemove () {
      console.log('是否删除。。。');
    },
    handleExceed () {
      console.log('文件个数超过上限');
    }
  },

  mounted () {},
};
</script>

<style scoped>
.contain {
}
.title {
  color: #04409a;
  font-size: 24px;
}
>>> .el-input {
  width: 30em;
}
>>> .el-textarea {
  width: 40em;
}
</style>