feat: 用户页面

src/components/OptionSet/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-select v-model="valueTurn" :multiple="multiple" :placeholder="placeholder">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.text"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'OptionSet',
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    code: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: [String, Number, Array],
+      default: () => ['', 0, []]
+    },
+    multiple: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data: function() {
+    return {
+      selectValue: '',
+      options: []
+    }
+  },
+  computed: {
+    // valueTurn() {
+    //   get: () => {
+    // typeof this.value === 'string' ? return this.value : return this.value.toString()
+    //     if (typeof this.value === 'string') {
+    //       return this.value
+    //     } else {
+    //       return this.value.toString()
+    //     }
+    //   }
+    // }
+    valueTurn: {
+      get: function() {
+        if (typeof this.value === 'string') {
+          return this.value
+        } else if (typeof this.value === 'number') {
+          return this.value.toString()
+        } else if (typeof this.value === 'object') {
+          return this.value
+        }
+        return this.value
+      },
+      set: function(newValue) {
+        if (typeof this.value === 'string') {
+          // this.value = newValue
+          this.$emit('update:value', newValue)
+        } else if (typeof this.value === 'number') {
+          // this.value = parseInt(newValue)
+          this.$emit('update:value', parseInt(newValue))
+        } else if (typeof this.value === 'object') {
+          this.$emit('update:value', newValue)
+        }
+      }
+    }
+  },
+  watch: {
+    // 'value': function(newVal, oldVal) {
+    //   debugger
+    //   typeof newVal === 'string' ? this.selectValue = newVal : this.selectValue = newVal.toString()
+    // },
+    // 'selectValue': function(newVal, oldVal) {
+    //   debugger
+    //   typeof this.value === 'string' ? this.$emit('update:value', newVal) : this.$emit('update:value', parseInt(newVal))
+    // }
+  },
+  created() {
+    this.multiple
+    this.getOptions()
+  },
+  methods: {
+    async getOptions() {
+      this.options = await this.$store.dispatch('optionset/formatterData', this.code)
+    }
+  }
+}
+</script>
+<style>
+</style>

src/utils/request.js

@@ -14,7 +14,6 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
-
     if (store.getters.token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
@@ -43,17 +42,16 @@ service.interceptors.response.use(
    * You can also judge the status by HTTP Status Code
    */
   response => {
-    const res = response.data
-
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 200) {
-      if (res.code !== 401) {
+    const { msg, code = 'Error' } = response.data
+    if (code !== 200) {
+      if (code !== 401) {
         Message({
-          message: res.msg || 'Error',
+          message: msg,
           type: 'error',
           duration: 5 * 1000
         })
-      } else if (res.code === 401) {
+      } else if (code === 401) {
         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
           confirmButtonText: 'Re-Login',
           cancelButtonText: 'Cancel',
@@ -64,9 +62,9 @@ service.interceptors.response.use(
           })
         })
       }
-      return Promise.reject(new Error(res.msg || 'Error'))
+      return Promise.reject(new Error(msg))
     }
-    return res
+    return response.data
   },
   error => {
     console.log(error)

src/views/user/index.vue

@@ -0,0 +1,561 @@
+<template>
+  <el-container>
+    <el-main class="page-main">
+      <el-card>
+        <el-container>
+          <el-aside class="tree-aside" :width="treeWidth">
+            <tree title="组织架构" :fetch="this.$api.sysOrg.tree" :data-query="treeQuery" :call-back="getTreeDataCallBack" :click="treeClick" />
+          </el-aside>
+          <el-container>
+            <el-header height="82">
+              <el-form
+                ref="searchForm"
+                :model="dataQuery"
+                :size="size"
+                label-position="left"
+                label-width="80px"
+              >
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="账号:" prop="login_id" class="notice-input" label-width="60px">
+                      <el-input v-model="dataQuery.login_id" placeholder="请输入帐号" clearable @keyup.enter.native="search" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="名称:" prop="name" class="notice-input" label-width="60px">
+                      <el-input v-model="dataQuery.name" placeholder="请输入名称" clearable @keyup.enter.native="search" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12" style="text-align: right">
+                    <el-form-item>
+                      <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
+                      <el-button icon="el-icon-refresh" :size="size" @click="resetFields">重置</el-button>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-button
+                    type="primary"
+                    icon="el-icon-plus"
+                    :size="size"
+                    @click="create"
+                  >新建
+                  </el-button>
+                  <el-button
+                    v-if="checkPermission(['update_password'])"
+                    type="success"
+                    icon="el-icon-edit"
+                    :size="size"
+                    @click="updatePassword"
+                  >修改密码
+                  </el-button>
+                  <el-button :size="size" @click="deleteBatch">批量删除</el-button>
+                </el-row>
+              </el-form>
+            </el-header>
+            <el-main class="table-main">
+              <sheet
+                ref="qtable"
+                :api="this.$api.sysUser.page"
+                :columns="tableColumns"
+                :data-query="dataQuery"
+                :operates="operates"
+                :float-type="'right'"
+                :select-type="'selection'"
+                header-name="searchForm"
+              />
+            </el-main>
+          </el-container>
+        </el-container>
+      </el-card>
+    </el-main>
+
+    <el-dialog
+      :title="dialogStatus==='create'?'新建用户':'编辑用户'"
+      :visible.sync="dialogVisible"
+      width="50%"
+      @close="dialogClose"
+    >
+      <el-form
+        ref="tempForm"
+        :size="size"
+        :rules="rules"
+        :model="temp"
+        label-width="85px"
+      >
+        <el-form-item label="账号:" prop="login_id">
+          <el-input v-model="temp.login_id" placeholder="请输入账号" />
+        </el-form-item>
+        <el-form-item label="用户名:" prop="name">
+          <el-input v-model="temp.name" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item v-if="dialogStatus === 'create'" label="密码:" prop="password">
+          <el-input v-model="temp.password" placeholder="请输入密码" />
+        </el-form-item>
+        <el-form-item label="机构:">
+          <el-select v-model="temp.org_id" style="width: 100%" placeholder="请选择机构">
+            <el-option
+              v-for="item in orgs"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="邮箱:" prop="email">
+          <el-input v-model="temp.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="手机:" prop="mobile">
+          <el-input v-model="temp.mobile" placeholder="请输入手机" />
+        </el-form-item>
+        <el-form-item v-if="dialogStatus=='update'" label="角色:" prop="type">
+          <el-select v-model="temp.user_role" style="width: 100%" multiple placeholder="请选择角色">
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="信息模板:" prop="temp_id">
+          <el-select v-model="temp.temp_id" style="width: 100%" placeholder="请选择模板" @change="tempChange">
+            <el-option
+              v-for="item in templs"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-for="(item, i) in temp_items"
+          :key="item.id"
+          :label="item.name + ':'"
+          label-position="right"
+          class="notice-input"
+          :prop="item.id"
+        >
+          <el-input v-if="item.type == 0" v-model.number="temp_items[i].value" placeholder="请输入" clearable />
+          <el-input v-if="item.type == 2" v-model="temp_items[i].value" placeholder="请输入" clearable />
+          <!--<template v-if="item.type == 3">-->
+          <!--<el-table :data="temp_items[i].value" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">-->
+          <!--<el-table-column v-for="col of JSON.parse(temp_items[i].content)" :prop="col.prop" :label="col.label" :width="col.width">-->
+          <!--<template scope="scope">-->
+          <!--<el-input v-model="temp_items[i].value[scope.$index][col.prop]" size="small" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row.prop)" /> <span>{{ temp_items[i].value[scope.$index][col.prop] }}</span>-->
+          <!--</template>-->
+          <!--</el-table-column>-->
+          <!--<el-table-column label="操作">-->
+          <!--<template scope="scope">-->
+          <!--<el-button size="small" type="text" @click="handleDelete(scope.$index, i)">删除</el-button>-->
+          <!--<el-button v-if="scope.$index == temp_items[i].value.length - 1" size="small" type="text" @click="addRow(i)">添加</el-button>-->
+          <!--</template>-->
+          <!--</el-table-column>-->
+          <!--</el-table>-->
+          <!--</template>-->
+        </el-form-item>
+      </el-form>
+      <footer slot="footer" class="dialog-footer">
+        <el-button :size="size" @click="dialogVisible = false">取 消</el-button>
+        <el-button :size="size" type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定
+        </el-button>
+      </footer>
+    </el-dialog>
+
+    <!--修改密码-->
+    <el-dialog title="修改密码" :visible.sync="updatePswDialog" width="30%">
+      <el-form ref="updatePswForm" :size="size" :rules="rules" :model="temp" label-width="85px">
+        <el-form-item label="账号:" prop="login_id">
+          <el-input v-model="temp.login_id" placeholder="请输入账号" />
+        </el-form-item>
+        <el-form-item label="用户名:" prop="name">
+          <el-input v-model="temp.name" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item label="密码:" prop="password">
+          <el-input v-model="temp.password" placeholder="请输入密码" />
+        </el-form-item>
+      </el-form>
+      <footer slot="footer" class="dialog-footer">
+        <el-button :size="size" @click="updatePswDialog = false">取 消</el-button>
+        <el-button :size="size" type="primary" @click="updatePws">确 定
+        </el-button>
+      </footer>
+    </el-dialog>
+
+  </el-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { copyObject } from '@/utils/index'
+import checkPermission from '@/utils/permission'
+import Tree from '@/components/Tree'
+import Sheet from '@/components/Sheet'
+
+export default {
+  name: 'User',
+  components: {
+    Tree,
+    Sheet
+  },
+  data() {
+    return {
+      tableColumns: [
+        { prop: 'login_id', label: '账号', align: 'center', minWidth: 180, maxWidth: 220 },
+        { prop: 'name', label: '名称', align: 'center', minWidth: 150, maxWidth: 180 },
+        { prop: 'org_name', label: '机构', align: 'center', minWidth: 150, maxWidth: 180 },
+        { prop: 'role_name', label: '角色', align: 'center', minWidth: 150, maxWidth: 180 },
+        { prop: 'email', label: '邮箱', align: 'center', minWidth: 150, maxWidth: 180 },
+        { prop: 'mobile', label: '手机', align: 'center', minWidth: 150, maxWidth: 180 }
+      ],
+      operates: {
+        list: [
+          { label: '编辑', show: true, type: 'text', method: (row) => { this.edit(row) } },
+          { label: '删除', show: true, type: 'text', method: (row) => { this.deleteData(row) } }
+        ],
+        width: 100,
+        fixed: 'right'
+      },
+      dataQuery: {
+        page: 1,
+        rows: 10,
+        login_id: '',
+        name: '',
+        cn_org_id: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        login_id: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+      },
+      treeQuery: { del_falg: 0 },
+      temp: {
+        id: undefined,
+        login_id: '',
+        name: '',
+        password: '',
+        email: '',
+        mobile: '',
+        type: 0,
+        org_id: '',
+        temp_value: '',
+        temp_id: '',
+        user_role: []
+      },
+      dataLoading: false,
+      dialogStatus: '',
+      dialogVisible: false,
+      updatePswDialog: false,
+      orgs: [],
+      options: [],
+      templs: [],
+      temp_items: []
+    }
+  },
+  computed: {
+    inheritanceArray() {
+      if (this.temp.inheritance === '' || this.temp.inheritance === undefined) {
+        return []
+      }
+      let array = this.temp.inheritance.split('|').reverse()
+      array = array.slice(1, array.length - 2)
+      array.push(array[array.length - 1])
+      return array
+    },
+    parent() {
+      return this.inheritanceArray[this.inheritanceArray.length - 1]
+    },
+    ...mapGetters([
+      'size',
+      'minMainHeight',
+      'treeWidth'
+    ])
+  },
+  mounted() {
+    // 设置表头查询表单高度，使table高度自适应
+    var height = this.$refs.searchForm.$el.offsetHeight
+    this.$store.dispatch('app/pageTableHeaderHeight', { height: height })
+  },
+  destroyed() {
+    // 页面注销，设置pageTableHeaderHeight为0
+    this.$store.dispatch('app/pageTableHeaderHeight', { height: 0 })
+  },
+  created() {
+    this.getOrgs()
+    this.getRoles()
+    this.FindUserTempl()
+  },
+  methods: {
+    checkPermission,
+    tempChange(temp_id) {
+      this.getTempDetail(temp_id)
+    },
+    handleCurrentChange(row, event, column) {
+      console.log(row, event, column, event.currentTarget)
+    },
+    handleEdit(index, row, col) {
+      debugger
+    },
+    handleDelete(index, dataIndex) {
+      this.temp_items[dataIndex].value.splice(index, 1)
+    },
+    addRow(dataIndex) {
+      const obj = {}
+      JSON.parse(this.temp_items[dataIndex].content).forEach(item => {
+        obj[item.prop] = ''
+      })
+      this.temp_items[dataIndex].value.push(obj)
+    },
+    getTempDetail(temp_id) {
+      this.$api.system.FindUserTemplateDetailPage({ page: 1, rows: 100, 'temp_id': temp_id }).then(res => {
+        this.temp_items = res.data.content
+        // temp_value回填
+        var tempValue
+        if (this.temp.temp_value !== '' && this.temp.temp_value !== undefined) {
+          tempValue = JSON.parse(this.temp.temp_value)
+        } else {
+          tempValue = []
+        }
+        this.temp_items.forEach((item, i) => {
+          tempValue.forEach(value => {
+            if (item.id === value.id) {
+              if (item.type === 3) {
+                this.temp_items[i].value = value.value
+              } else {
+                this.temp_items[i].value = value.value
+              }
+            }
+          })
+          // 如果列表内容是空，默认添加一行空行
+          if (item.type === 3 && this.temp_items[i].value === '') {
+            var row = {}
+            JSON.parse(this.temp_items[i].content).forEach(col => {
+              row[col.prop] = '请输入'
+            })
+            this.temp_items[i].value = [row]
+          }
+        })
+      })
+    },
+    FindUserTempl() {
+      this.$api.sysUserTemplate.page({ page: 1, rows: 100 }).then(res => {
+        if (res.code === 200) {
+          this.templs = res.data.content
+        }
+      })
+    },
+    getOrgs() {
+      const pageData = { 'page': 1, 'rows': 100 }
+      this.$api.sysOrg.page(pageData).then(res => {
+        if (res.code === 200) {
+          this.orgs = res.data.content
+        } else {
+          this.$message({
+            message: '失败',
+            type: 'fail'
+          })
+        }
+      })
+    },
+    getRoles() {
+      const pageData = { 'page': 1, 'rows': 100 }
+      this.$api.sysRole.page(pageData).then(res => {
+        if (res.code === 200) {
+          this.options = res.data.content
+        } else {
+          this.$message({
+            message: '失败',
+            type: 'fail'
+          })
+        }
+      })
+    },
+    treeClick(node) {
+      this.dataQuery.cn_org_id = node.id
+      this.$refs.qtable.getData()
+    },
+    getTreeDataCallBack(tree) {},
+    handleChange(value) {
+      this.temp.parent = value[value.length - 1]
+    },
+    createData() {
+      this.$refs['tempForm'].validate((valid) => {
+        if (valid) {
+          this.temp.temp_value = JSON.stringify(this.temp_items)
+          this.$api.user.create(this.temp).then((res) => {
+            this.dialogVisible = false
+            if (res.code === 200) {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              })
+              this.$refs.qtable.getData()
+            } else {
+              this.$message({
+                message: res.msg,
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    updatePassword() {
+      if (this.$refs.qtable.selectionData.length === 1) {
+        this.temp = this.$refs.qtable.selectionData[0]
+        this.temp.password = ''
+        this.updatePswDialog = true
+      } else {
+        this.$message({
+          message: '请选择一条记录',
+          type: 'error'
+        })
+      }
+    },
+    updatePws() {
+      this.$api.system.UpdatePassword(this.temp).then(res => {
+        if (res.code === 200) {
+          this.updatePswDialog = false
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          })
+        } else {
+          this.dialogVisible = false
+          this.$message({
+            message: '修改失败',
+            type: 'error'
+          })
+        }
+      })
+    },
+    updateData() {
+      this.$refs['tempForm'].validate((valid) => {
+        if (valid) {
+          this.temp.temp_value = JSON.stringify(this.temp_items)
+          this.$api.user.update(this.temp).then((res) => {
+            if (res.code === 200) {
+              this.dialogVisible = false
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+              this.$refs.qtable.getData()
+            } else {
+              this.dialogVisible = false
+              this.$message({
+                message: '修改失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    deleteData(row) {
+      this.$confirm('确认删除这个用户吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        const data = [{ id: row.id }]
+        this.$api.user.del(data).then((res) => {
+          if (res.code === 200) {
+            this.$refs.qtable.getData()
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: '删除失败',
+              type: 'error'
+            })
+          }
+        })
+      })
+    },
+    deleteBatch() {
+      const ids = []
+      this.$refs.qtable.multipleSelection.forEach(row => {
+        ids.push({ id: row.id })
+      })
+      this.$confirm('确认批量删除选中数据吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.$api.user.del(ids).then(res => {
+          if (res.code === 200) {
+            this.$refs.qtable.getData()
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: '删除失败',
+              type: 'error'
+            })
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    search() {
+      this.$refs.qtable.getData()
+    },
+    resetFields() {
+      this.$refs['searchForm'].resetFields()
+      this.$refs.qtable.getData()
+    },
+    dialogClose() {
+      this.$refs['tempForm'].resetFields()
+    },
+    create() {
+      this.dialogStatus = 'create'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs['tempForm'].clearValidate()
+      })
+      this.temp.temp_id = this.templs.filter((currentValue, index, arr) => {
+        if (currentValue.default === 1) {
+          return currentValue.id
+        }
+      })[0].id
+      this.getTempDetail(this.temp.temp_id)
+    },
+    edit(row) {
+      this.dialogStatus = 'update'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs['tempForm'].clearValidate()
+        copyObject(row, this.temp)
+        if (row.user_role === '') {
+          this.temp.user_role = []
+        } else {
+          this.temp.user_role = row.user_role.split(',')
+        }
+        if (row.temp_id !== '') {
+          this.getTempDetail(row.temp_id)
+        } else {
+          this.temp.temp_id = this.templs.filter((currentValue, index, arr) => {
+            if (currentValue.type === 1) {
+              return currentValue.id
+            }
+          })[0].id
+          this.getTempDetail(this.temp.temp_id)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+  .tb-edit .el-input {
+    display: none
+  }
+  .tb-edit .current-row .el-input {
+    display: block
+  }
+  .tb-edit .current-row .el-input+span {
+    display: none
+  }
+</style>

src/views/user/templ/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-card>
+        <el-container>
+          <el-header height="120">
+            <el-form
+              ref="searchForm"
+              :model="dataQuery"
+              :size="size"
+              label-position="left"
+              label-width="80px"
+            >
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item
+                    label="名称:"
+                    prop="name"
+                    class="notice-input"
+                    label-width="60px"
+                  >
+                    <el-input
+                      v-model="dataQuery.name"
+                      placeholder="请输入名称"
+                      clearable
+                      style="width: 60%"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12" style="text-align: right">
+                  <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
+                    <el-button icon="el-icon-refresh" :size="size" @click="resetFields">重置</el-button>
+                    <!-- -->
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  :size="size"
+                  @click="create"
+                >新建人员信息模板
+                </el-button>
+                <!--<el-button :size="size" @click="deleteBatch">回收站</el-button>-->
+              </el-row>
+            </el-form>
+          </el-header>
+          <el-main>
+            <sheet
+              ref="qtable"
+              :api="this.$api.system.FindUserTemplatePage"
+              :columns="tableColumns"
+              :data-query="dataQuery"
+              :operates="operates"
+              :float-type="'right'"
+              :select-type="'selection'"
+            />
+          </el-main>
+        </el-container>
+      </el-card>
+    </el-main>
+    <el-dialog
+      :title="dialogStatus==='create'?'新建用户':'编辑用户'"
+      :visible.sync="dialogVisible"
+      width="40%"
+      @close="Emptydata"
+    >
+      <el-form
+        ref="temp"
+        :size="size"
+        :rules="rules"
+        :model="temp"
+        label-width="85px"
+      >
+        <el-form-item label="模板名称:" prop="name">
+          <el-input v-model="temp.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="模板类型:" prop="type">
+          <el-select v-model.number="temp.type" style="width: 100%" placeholder="请选择角色">
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否默认:" prop="type">
+          <option-set
+            :value.sync="temp.default"
+            placeholder="是否默认"
+            code="defalut"
+          />
+          <!--<el-select v-model="temp.default" style="width: 100%"  placeholder="是否默认">-->
+          <!--<el-option-->
+          <!--v-for="item in defaultOpts"-->
+          <!--:key="item.value"-->
+          <!--:label="item.name"-->
+          <!--:value="item.value"-->
+          <!--/>-->
+          <!--</el-select>-->
+        </el-form-item>
+      </el-form>
+      <footer slot="footer" class="dialog-footer">
+        <el-button :size="size" @click="dialogVisible = false">取 消</el-button>
+        <el-button :size="size" type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定
+        </el-button>
+      </footer>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Sheet from '@/components/Sheet'
+import OptionSet from '@/components/OptionSet'
+export default {
+  name: 'User',
+  components: {
+    OptionSet,
+    Sheet
+  },
+  data() {
+    return {
+      defaultOpts: [
+        { name: '否', value: 0 },
+        { name: '是', value: 1 }
+      ],
+      tableColumns: [
+        { prop: 'name', label: '模板名称', align: 'center', minWidth: 150, maxWidth: 180 },
+        { prop: 'default', label: '是否默认', align: 'center', minWidth: 150, maxWidth: 180, formatter: 'defalut' }
+      ],
+      operates: {
+        list: [
+          { label: '明细', show: true, type: 'text', method: (row) => { this.detail(row) } },
+          { label: '编辑', show: true, type: 'text', method: (row) => { this.edit(row) } },
+          { label: '删除', show: true, type: 'text', method: (row) => { this.deleteData(row) } }
+        ],
+        width: 230,
+        fixed: 'right'
+      },
+      dataQuery: {
+        page: 1,
+        rows: 10,
+        name: ''
+      },
+      options: [
+        {
+          name: '固定模块',
+          id: 0
+        },
+        {
+          name: '自定义模板',
+          id: 2
+        },
+        {
+          name: '动态模板',
+          id: 1
+        }
+      ],
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        // login_id: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+        type: [{ required: true, message: '请选择模板类型', trigger: 'change' }]
+      },
+      temp: {
+        id: '',
+        type: 0,
+        name: '',
+        default: 0
+      },
+      dataLoading: false,
+      dialogStatus: '',
+      dialogVisible: false
+    }
+  },
+  computed: {
+    // tempRoleChange: {
+    //   get: function() {
+    //     if (this.temp.user_role === '' || this.temp.user_role === undefined) {
+    //       return []
+    //     }
+    //     return this.temp.user_role.split(',')
+    //   },
+    //   set: function(newValue) {
+    //     this.temp.user_role = newValue.join(',')
+    //   }
+    // },
+    ...mapGetters([
+      'size',
+      'minMainHeight'
+    ])
+  },
+  watch: {
+    // user_role: function(newData, oldData) {
+    //   debugger
+    //   this.temp.user_role = newData
+    // }
+  },
+  created() {
+    // this.getOrgs()
+    // this.getRoles()
+  },
+  methods: {
+    detail(row) {
+      this.$router.push({ path: 'templ_detail?temp_id=' + row.id + '&temp_name=' + row.name })
+    },
+    // 新建数据
+    createData() {
+      this.$refs['temp'].validate((valid) => {
+        if (valid) {
+          // var data = JSON.stringify(this.temp)
+          // this.temp.type = toString(this.temp.type)
+          debugger
+          this.$api.system.AddUserTemplate(this.temp).then(res => {
+            this.dialogVisible = false
+            if (res.code === 200) {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              })
+              this.$refs.qtable.getData()
+            } else {
+              this.$message({
+                message: '创建失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    Emptydata() {
+      this.$refs['temp'].resetFields()
+    },
+    // 更新数据
+    updateData() {
+      this.$refs['temp'].validate((valid) => {
+        if (valid) {
+          // this.temp.type = parseInt(this.temp.type)
+          this.$api.system.UpdateUserTemplate(this.temp).then(res => {
+            if (res.code === 200) {
+              this.dialogVisible = false
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+              this.$refs.qtable.getData()
+            } else {
+              this.dialogVisible = false
+              this.$message({
+                message: '修改失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    // 删除数据
+    deleteData(row) {
+      this.$confirm('确认删除这个用户吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        // const data = [row.id]
+        this.$api.system.DelUserTemplate([{ id: row.id }]).then(res => {
+          if (res.code === 200) {
+            this.$refs.qtable.getData()
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: '删除失败',
+              type: 'error'
+            })
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    // 批量删除
+    deleteBatch() {
+      const ids = []
+      this.$refs.qtable.multipleSelection.forEach(row => {
+        ids.push({ id: row.id })
+      })
+      this.$confirm('确认批量删除选中数据吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.$api.user.del(ids).then(res => {
+          if (res.code === 200) {
+            this.$refs.qtable.getData()
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: '删除失败',
+              type: 'error'
+            })
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    // 查询
+    search() {
+      this.$refs.qtable.getData()
+    },
+    // 重置
+    resetFields() {
+      this.$refs['searchForm'].resetFields()
+      this.$refs.qtable.getData()
+    },
+    // 弹出框关闭触发
+    dialogClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    // 点击新建按钮
+    create() {
+      this.dialogStatus = 'create'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs['temp'].clearValidate()
+      })
+    },
+    // 点击修改按钮
+    edit(row) {
+      this.dialogStatus = 'update'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs['temp'].clearValidate()
+        // this.temp.create_time = ''
+        // copyObject(row, this.temp)
+        this.temp = Object.assign({}, row)
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/user/templ_detail/index.vue

@@ -0,0 +1,380 @@
+<template>
+  <el-container>
+    <el-main class="page-main">
+      <el-card>
+        <el-container>
+          <el-header height="120">
+            <el-form
+              ref="searchForm"
+              :model="dataQuery"
+              :size="size"
+              label-position="left"
+              label-width="80px"
+            >
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="名称:" prop="name" class="notice-input" label-width="60px">
+                    <el-input v-model="dataQuery.name" placeholder="请输入名称" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="类型:" prop="type" class="notice-input" label-width="60px">
+                    <qselect
+                      :value.sync="dataQuery.type"
+                      placeholder="类型"
+                      code="template_item_type"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12" style="text-align: right">
+                  <el-form-item>
+                    <el-button :size="size" @click="back">返回上一页</el-button>
+                    <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
+                    <el-button icon="el-icon-refresh" :size="size" @click="resetFields">重置</el-button>
+                    <!-- -->
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-button type="primary" icon="el-icon-plus" :size="size" @click="create">新建</el-button>
+                <el-button :size="size" @click="deleteBatch">批量删除</el-button>
+              </el-row>
+            </el-form>
+          </el-header>
+          <el-main>
+            <sheet
+              ref="qtable"
+              :api="this.$api.system.FindUserTemplateDetailPage"
+              :columns="tableColumns"
+              :data-query="dataQuery"
+              :float-type="'right'"
+              :select-type="'selection'"
+              :operates="operates"
+            />
+          </el-main>
+        </el-container>
+      </el-card>
+    </el-main>
+
+    <el-dialog
+      :title="dialogStatus==='create'?'新建模板明细':'编辑模板明细'"
+      :visible.sync="dialogVisible"
+      width="60%"
+    >
+      <el-form ref="dataForm" :size="size" :rules="rules" :model="temp" label-width="85px">
+        <el-form-item label="所属模板:">
+          <el-input v-model="temp_name" disabled />
+        </el-form-item>
+        <el-form-item label="名称:" prop="name">
+          <el-input v-model="temp.name" />
+        </el-form-item>
+        <el-form-item label="优先级:" prop="priority">
+          <el-input v-model.number="temp.priority" />
+        </el-form-item>
+        <el-form-item label="类型:" prop="type">
+          <option-set :value.sync="temp.type" placeholder="类型" code="template_item_type" />
+        </el-form-item>
+        <el-form-item v-if="temp.type == 3" label="字段:" prop="type">
+          <el-table :data="colsData" class="tb-edit" style="width: 100%" highlight-current-row>
+            <el-table-column label="label" width="180">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.label" size="small" placeholder="请输入内容" />
+                <span>{{ scope.row.label }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="prop" width="180">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.prop" size="small" placeholder="请输入内容" />
+                <span>{{ scope.row.prop }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="width" label="width">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.width" size="small" placeholder="请输入内容" />
+                <span>{{ scope.row.width }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click="handleDelete(scope.$index, scope.row)"
+                >删除</el-button>
+                <el-button
+                  v-if="scope.$index == colsData.length - 1"
+                  size="small"
+                  @click="addCol(scope.$index, scope.row)"
+                >添加</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <footer slot="footer" class="dialog-footer">
+        <el-button :size="size" @click="dialogVisible = false">取 消</el-button>
+        <el-button
+          :size="size"
+          type="primary"
+          @click="dialogStatus==='create'?createData():updateData()"
+        >确 定</el-button>
+      </footer>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Sheet from '@/components/Sheet'
+import OptionSet from '@/components/OptionSet'
+export default {
+  components: {
+    Sheet,
+    OptionSet
+  },
+  data() {
+    return {
+      colsData: [],
+      tableColumns: [
+        {
+          prop: 'name',
+          label: '名称',
+          align: 'center',
+          minWidth: 150,
+          maxWidth: 180
+        },
+        {
+          prop: 'type',
+          label: '类型',
+          align: 'center',
+          minWidth: 150,
+          maxWidth: 180,
+          formatter: 'template_item_type'
+        },
+        {
+          prop: 'priority',
+          label: '优先级',
+          align: 'center',
+          minWidth: 150,
+          maxWidth: 180
+        }
+      ],
+      tableData: null,
+      operates: {
+        list: [
+          {
+            label: '编辑',
+            show: true,
+            type: 'text',
+            method: row => {
+              this.edit(row)
+            }
+          },
+          {
+            label: '删除',
+            show: true,
+            type: 'text',
+            method: row => {
+              this.deleteData(row)
+            }
+          }
+        ],
+        width: 150,
+        fixed: 'right'
+      },
+      dataQuery: {
+        page: 1,
+        rows: 10,
+        __sort__: 'sys_user_template_detail.priority asc',
+        temp_id: '',
+        name: '',
+        type: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        type: [{ required: true, message: '请输入选择类型', trigger: 'blur' }],
+        priority: [{ required: true, message: '请输入优先级', trigger: 'blur' }]
+      },
+      temp: {
+        id: undefined,
+        name: '',
+        priority: '',
+        type: 0,
+        temp_id: '',
+        value: ''
+      },
+      temp_name: '',
+      dataLoading: false,
+      dialogStatus: '',
+      dialogVisible: false
+    }
+  },
+  computed: {
+    ...mapGetters(['size', 'minMainHeight'])
+  },
+  watch: {},
+  created() {
+    this.dataQuery.temp_id = this.$route.query.temp_id
+    this.temp.temp_id = this.$route.query.temp_id
+    this.temp_name = this.$route.query.temp_name
+  },
+  methods: {
+    typeChange(type) {
+      if (type === 3) {
+        this.colsData = [{ label: '默认', prop: 'defalut', width: '150' }]
+      }
+    },
+    back() {
+      this.$router.go(-1)
+    },
+    addCol(index, row) {
+      const newRow = {}
+      for (var item in row) {
+        newRow[item] = ''
+      }
+      this.colsData.push(newRow)
+    },
+    handleDelete(index) {
+      this.colsData.splice(index, 1)
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.temp.content = JSON.stringify(this.colsData)
+          this.$api.system.AddUserTemplateDetail(this.temp).then(res => {
+            this.dialogVisible = false
+            if (res.code === 200) {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              })
+              this.$refs.qtable.getData()
+            } else {
+              this.$message({
+                message: '创建失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.temp.content = JSON.stringify(this.colsData)
+          this.$api.system.UpdateUserTemplateDetail(this.temp).then(res => {
+            if (res.code === 200) {
+              this.dialogVisible = false
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+              this.$refs.qtable.getData()
+            } else {
+              this.dialogVisible = false
+              this.$message({
+                message: '修改失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    deleteData(row) {
+      this.$confirm('确认删除吗？', '提示', {
+        type: 'warning'
+      })
+        .then(() => {
+          this.$api.system.DelUserTemplateDetail([{ id: row.id }]).then(res => {
+            if (res.code === 200) {
+              this.$refs.qtable.getData()
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              })
+            } else {
+              this.$message({
+                message: '删除失败',
+                type: 'error'
+              })
+            }
+          })
+        })
+        .catch(() => {})
+    },
+    deleteBatch() {
+      const ids = []
+      this.$refs.qtable.multipleSelection.forEach(row => {
+        ids.push({ id: row.id })
+      })
+      this.$confirm('确认批量删除选中数据吗？', '提示', {
+        type: 'warning'
+      })
+        .then(() => {
+          this.$api.system.DelUserTemplateDetail(ids).then(res => {
+            if (res.code === 200) {
+              this.$refs.qtable.getData()
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              })
+            } else {
+              this.$message({
+                message: '删除失败',
+                type: 'error'
+              })
+            }
+          })
+        })
+        .catch(() => {})
+    },
+    search() {
+      this.$refs.qtable.getData()
+    },
+    resetFields() {
+      this.$refs['searchForm'].resetFields()
+      this.$refs.qtable.getData()
+    },
+    dialogClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    create() {
+      this.dialogStatus = 'create'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    edit(row) {
+      this.dialogStatus = 'update'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+        // copyObject(row, this.temp)
+        this.temp = Object.assign({}, row)
+        if (row.type === 3) {
+          if (row.content !== '') {
+            this.colsData = JSON.parse(row.content)
+          } else {
+            this.colsData = [{ label: '默认', prop: 'defalut', width: '150' }]
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tb-edit .el-input {
+  display: none;
+}
+.tb-edit .current-row .el-input {
+  display: block;
+}
+.tb-edit .current-row .el-input + span {
+  display: none;
+}
+</style>