[feat]: [系统管理] [模板管理] 模板管理列表

src/api/business/template/template.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function template_list(query) {
+  return request({
+    url: '/system/business/template/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function template_info(query) {
+  return request({
+    url: '/system/business/template/info',
+    method: 'get',
+    params: query
+  })
+}

src/lang/en.js

@@ -7,6 +7,8 @@ import role from './en/system/role'
 import dept from './en/system/dept'
 // 部门管理
 import user from './en/system/user'
+// 模板管理
+import template from './en/system/template'
 
 //资源库管理
 // 仪器管理
@@ -92,7 +94,8 @@ export default {
       menu,
       role,
       dept,
-      user
+      user,
+      template
     },
     business: {
       zykgl: {
@@ -119,7 +122,7 @@ export default {
         zcg,
         mjy,
         yq,
-        sj,
+        sj
       }
     }
   }

src/lang/en/system/template.js

@@ -0,0 +1,9 @@
+export default {
+  sn: 'SN',
+  name: 'Name',
+  department: 'Department',
+  status: 'Status',
+  statusEnable: 'Enabled',
+  statusDisable: 'Disabled',
+  detail: 'Enter'
+}

src/lang/zh.js

@@ -7,6 +7,8 @@ import role from './zh/system/role'
 import dept from './zh/system/dept'
 // 部门管理
 import user from './zh/system/user'
+// 模板管理
+import template from './zh/system/template'
 
 //资源库管理
 // 仪器管理
@@ -89,7 +91,8 @@ export default {
       menu,
       role,
       dept,
-      user
+      user,
+      template
     },
     business: {
       zykgl: {
@@ -116,7 +119,7 @@ export default {
         zcg,
         mjy,
         yq,
-        sj,
+        sj
       }
     }
   }

src/lang/zh/system/template.js

@@ -0,0 +1,9 @@
+export default {
+  sn: '编号',
+  name: '模板名称',
+  department: '所属部门/学科',
+  status: '状态',
+  statusEnable: '启用',
+  statusDisable: '禁用',
+  detail: '详情'
+}

src/views/business/comps/select/SelectDept.vue

@@ -1,11 +1,12 @@
 <!-- 选择部门 -->
 <template>
-  <treeselect v-model="selected" :options="list" :show-count="true" :disabled="readonly" :placeholder="$t('form.placeholderSelect')" @select="handleChange" />
+  <treeselect v-model="selected" :options="list" :show-count="true" :disabled="readonly" :placeholder="$t('form.placeholderSelect')" @input="handleChange" />
 </template>
 
 <script>
 import Treeselect from "@riophae/vue-treeselect"
 import { deptTreeSelect } from "@/api/system/user"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 export default {
   name: "SelectDept",
   components: {Treeselect},
@@ -56,8 +57,8 @@ export default {
       })
     },
     handleChange(val) {
-      alert(val?val.label : '')
-      this.$emit('input', val?val.id : '')
+      this.$emit('input', val || '')
+      this.$emit('change', val || '')
     },
   }
 };

src/views/business/template/list.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="app-container template-page">
+    <el-form :model="searchForm" ref="searchForm" :inline="true">
+      <el-form-item :label="$t('page.system.template.sn')+'：'" prop="sn">
+        <el-input v-model="searchForm.sn" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px" @keyup.enter.native="search" />
+      </el-form-item>
+      <el-form-item :label="$t('page.system.template.name')+'：'" prop="name">
+        <el-input v-model="searchForm.name" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px" @keyup.enter.native="search" />
+      </el-form-item>
+
+      <el-form-item :label="$t('page.system.template.department')+'：'" prop="deptId">
+        <select-dept style="width:200px" v-model="searchForm.deptId" @change="search" />
+      </el-form-item>
+      <el-form-item :label="$t('page.system.template.status')+'：'" prop="status">
+        <el-select
+          v-model="searchForm.status"
+          :placeholder="$t('form.placeholderSelect')"
+          clearable
+          style="width: 100px"
+          @change="search"
+        >
+          <el-option key="0" :label="$t('page.system.template.statusEnable')" :value="10" />
+          <el-option key="1" :label="$t('page.system.template.statusDisable')" :value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
+        <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="list">
+      <el-table-column :label="$t('page.system.template.sn')" align="center" prop="sn" />
+      <el-table-column :label="$t('page.system.template.name')" align="center" prop="name" />
+      <el-table-column :label="$t('page.system.template.department')" align="center" prop="deptName" />
+      <el-table-column :label="$t('page.system.template.status')" prop="status" width="150">
+        <template slot-scope="scope">
+          <span v-if="scope.row.status===10">{{$t('page.system.template.statusEnable')}}</span>
+          <span v-if="scope.row.status===1">{{$t('page.system.template.statusDisable')}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('form.operate')" fixed="right" align="center" width="100">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="edit(scope.row)">{{$t('page.system.template.edit')}}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="searchForm.pageNum"
+      :limit.sync="searchForm.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog :close-on-click-modal="false" :title="infoDialog.title" :visible.sync="infoDialog.visible" width="600px" append-to-body>
+      <el-form ref="infoDialogForm" :model="infoDialog.formData" :rules="infoDialog.rules" label-width="100px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="专业名称：" prop="name">
+              <select-dept v-model="infoDialog.formData.deptId" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save">确 定</el-button>
+        <el-button @click="infoDialog.visible = false">取 消</el-button>
+      </div> -->
+    </el-dialog>
+    
+  </div>
+</template>
+
+<script>
+import { template_list,template_info} from "@/api/business/template/template";
+import SelectDept from '../comps/select/SelectDept.vue';
+const EmptyDialogData = {
+  id:'',
+  name:'',
+}
+export default {
+  name: "Template",
+  props:{
+  },
+  components:{
+    SelectDept
+  },
+  computed: {
+  },
+  filters:{
+  },
+  data() {
+    return {
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+        sn:'',
+        name:'',
+        deptId:null,
+        status:'',
+      },
+
+      loading: true,
+      total: 0,
+      list: [],
+
+      infoDialog:{
+        title:'',
+        visible:false,
+        formData:{},
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      template_list(this.searchForm).then(response => {
+        this.list = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    search() {
+      this.searchForm.pageNum = 1;
+      this.getList();
+    },
+    reset(){
+      this.searchForm = {
+        pageNum: 1,
+        pageSize: 10,
+        sn:'',
+        name:'',
+        deptId:null,
+        status:'',
+      }
+      this.search()
+    },
+    edit(row) {
+      this.infoDialog.title = this.$t('page.system.template.edit')
+      this.$modal.loading()
+      template_info({id:row.id}).then(({data}) => {
+        this.infoDialog.formData = data
+      }).finally(() => {
+        this.$modal.closeLoading()
+      })
+    },
+  }
+};
+</script>
+<style lang="scss">
+</style>