typemanage

src/views/firstPages/typemanage.vue

@@ -1,22 +1,181 @@
 <template>
   <div class="dashboard-container">
-    类型管理页
+    <!-- 类型管理页 -->
+    <!-- 头部搜索添加 -->
+
+    <div class="filter-container">
+      <el-input
+        v-model="ipt"
+        placeholder="名字"
+        class="filter-item"
+        style="width: 190px;margin-left:10px"
+        clearable
+      />
+      <el-select
+        v-model="policyStatus"
+        placeholder="类型"
+        clearable
+        class="filter-item"
+        style="width: 190px;margin-left:10px"
+        value="1"
+      >
+        <el-option v-for="(item,index) in status" :key="index" :value="index" />
+      </el-select>
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        icon="el-icon-search"
+        @click="Search"
+      >搜索</el-button>
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        icon="el-icon-edit"
+        @click="policyAdd"
+      >添加</el-button>
+    </div>
+    <!-- 类型列表 -->
+    <el-table
+      v-loading="listLoading"
+      :data="polictList"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;"
+    >
+      <el-table-column label="项目类型" prop="id" align="center" width="500">
+        <template slot-scope="{row}">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="产业类型" prop="title" align="center" width="500">
+        <template slot-scope="{row}">
+          <span>{{ row.title }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">修改</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 添加表格 -->
+
+    <el-dialog title="添加表格" :visible.sync="dialogFormVisible">
+      <el-form
+        ref="dataForm"
+        :model="temp"
+        label-position="left"
+        label-width="70px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item label="名字" prop="title" style="width: 100%">
+          <el-input v-model="ipt2" clearable />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select
+            v-model="form.region"
+            placeholder="请选类型"
+            style="width: 400px;"
+          >
+            <el-option label="类型一" value="shanghai" />
+            <el-option label="类型二 " value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="CommitAdd">提 交</el-button>
+      </div>
+    </el-dialog>
+    <el-pagination
+      :current-page="currentPage4"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-
+import * as api from '@/api/policy'
 export default {
   name: 'Typemanage',
+  data() {
+    return {
+      dialogFormVisible: false,
+      form: {
+        name: '',
+        region: ''
+      },
+      formLabelWidth: '120px',
+      ipt: '',
+      ipt2: '',
+      policyStatus: '类型',
+      status: { 刚入库: 0, 审核通过: 1, 审核不通过: 2 },
+      pageNum: 1,
+      pageSize: 20
+    }
+  },
   computed: {
-    ...mapGetters([
+    ...mapGetters(['name'])
-      'name'
+  },
-    ])
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      const that = this
+      that.listLoading = false
+      await api.PolicyDetail(that.data).then((res) => {
+        that.polictList = res.list
+        that.total = res.total - 0
+
+        setTimeout(() => {
+          that.listLoading = false
+        }, 1000)
+      })
+    },
+    Search() {},
+    handleUpdate() {},
+    handleDelete() {},
+
+    policyAdd() {
+      const that = this
+      // for (const key in that.addPolicy) {
+      //   that.addPolicy[key] = ''
+      // }
+      that.dialogFormVisible = true
+    },
+
+    async CommitAdd() {
+      const that = this
+      var Content = document.getElementById('Content')
+      var Time = document.getElementById('Time').value
+      that.addPolicy.content = Content.innerHTML
+      var str = Time.replace(/-/g, '/')
+      that.addPolicy.publishTime = str
+
+      for (const key in that.addPolicy) {
+        if (that.addPolicy[key] === '') {
+          alert(key + '不能为空')
+        } else {
+          api.PolicyAdd(that.addPolicy).then((res) => {
+            that.dialogFormVisible = false
+          })
+        }
+      }
+    }
   }
 }
 </script>
-
 <style lang="scss" scoped>
 .dashboard {
   &-container {