测评

src/views/evaluation/evaluationUpload.vue

@@ -1,15 +1,226 @@
 <template>
-  <div>
+  <div class="evaluationUpload">
-    hello啊，我是测评上传
+    <div class="headers">
+      <div class="headers_item">
+        <div class="headers_item_btn">
+          <div class="btnText">报告上传</div>
+        </div>
+      </div>
+      <div class="headers_item">
+        <span class="headers_item_text">发布状态</span>
+        <a-select
+            v-model:value="searchParam.searchStatus"
+            style="width: 270px;"
+            placeholder="请选择状态"
+            :options="searchStatusVal"
+            allowClear
+          ></a-select>
+      </div>
+      <div class="headers_item">
+        <a-input
+            v-model:value="searchParam.createName"
+            style="width: 270px; height: 40px; border-radius: 8px"
+            placeholder="请输入测评名称"
+            allowClear
+            showSearch
+          >
+          </a-input>
+      </div>
+      <div class="headers_item btn">
+        <div class="headers_item_btn btn1">
+          <div class="search"></div>
+          <div class="btnText">搜索</div>
+        </div>
+        <div class="headers_item_btn btn2">
+          <div class="search"></div>
+          <div class="btnText">重置</div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <a-table
+        :columns="columns"
+        :data-source="tableData"
+        :loading="tableLoading"
+        :scroll="{ x: 'max-content' }"
+        :pagination="false"
+      >
+        <template #operation="{ record, column }">
+          <a-space>
+            <a-button type="link" >
+              111
+            </a-button> 
+          </a-space>
+        </template>
+      </a-table>
+    </div>
   </div>
 </template>
 
 <script>
+import { reactive, toRefs, ref, watch } from "vue";
   export default {
-    
+    name: 'evaluationUpload',
+    components:{},
+    setup() {
+      const state = reactive({
+        tableLoading: false,
+        searchParam:{},
+        tableData:[{
+          id: 1,
+          name:'111',
+          reportRelease: '22',
+          reportTotal: '22',
+          status: 2,
+          uploadDate: '2020-01-01'
+        }],
+      })
+      const searchStatusVal = ref([
+        { value: 0, label: "全部" },
+        { value: 1, label: "草稿" },
+        { value: 2, label: "更新待发布" },
+        { value: 3, label: "已发布" },
+      ]);
+      const columns = ref([
+        {
+          title: "测评名称",
+          dataIndex: "name",
+          key: "name",
+          className: "h",
+          ellipsis: true,
+          width: 100,
+        },
+        {
+          title: "报告发布量",
+          dataIndex: "reportRelease",
+          key: "reportRelease",
+          className: "h",
+          ellipsis: true,
+          width: 100,
+        },
+        {
+          title: "报告总量",
+          dataIndex: "reportTotal",
+          key: "reportTotal",
+          className: "h",
+          ellipsis: true,
+          width: 100,
+        },
+        {
+          title: "发布状态",
+          dataIndex: "status",
+          key: "status",
+          className: "h",
+          ellipsis: true,
+          width: 100,
+        },
+        {
+          title: "上传日期",
+          dataIndex: "uploadDate",
+          key: "uploadDate",
+          className: "h",
+          ellipsis: true,
+          width: 100,
+        },
+        {
+          title: "操作",
+          width: "10%",
+          dataIndex: "operation",
+          key: "operation",
+          align: "center",
+          slots: { customRender: "operation" },
+        },
+      ])
+      return {
+        ...toRefs(state),
+        searchStatusVal,
+        columns,
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+.evaluationUpload{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .headers{
+    margin-left: 38px;
+    margin-right: 38px;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .btn{
+      display: flex;
+    }
+    .headers_item{
+      margin-right: 20px;
+      margin-bottom: 20px;
+      .headers_item_text{
+        margin-right: 15px;
+      }
+      .headers_item_btn {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
 
+        .search {
+          background-size: 100%;
+        }
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+      .btn1 {
+        .search {
+          width: 15px;
+          height: 17px;
+          background-image: url("../../assets/images/courseManage/search0.png");
+        }
+      }
+      .btn2 {
+        .search {
+          width: 16px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/reset0.png");
+        }
+      }
+      ::v-deep .ant-select {
+        border-radius: 5px;
+        width: 100%;
+        height: 40px;
+        .ant-select-selector {
+          border-radius: 8px;
+          width: 100%;
+          height: 40px;
+        }
+        .ant-select-selection-placeholder{
+          line-height: 40px;
+        }
+        .ant-select-selection-item{
+          line-height: 40px;
+        }
+      }
+    }
+  }
+  .content{
+    padding: 10px 35px;
+  }
+}
 </style>