|
@@ -1,268 +1,192 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <tree-nav
|
|
|
- ref="tree"
|
|
|
- @renderTable="updateDeptId"
|
|
|
- treeType="hdlxgl"
|
|
|
- ></tree-nav>
|
|
|
- </el-col>
|
|
|
- <!-- <el-col :span="19">
|
|
|
- <el-container>
|
|
|
- <el-header>
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- placeholder="请输入搜索关键字"
|
|
|
- suffix-icon="el-icon-search"
|
|
|
- v-model="searchText"
|
|
|
- style="width: 200px"
|
|
|
- ></el-input>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="tableParams.keyword = searchText"
|
|
|
- >搜索</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button type="primary" @click="downloadExcel"
|
|
|
- >下载导入类别模板</el-button
|
|
|
- >
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- :action="import_url"
|
|
|
- :show-file-list="false"
|
|
|
- :data="import_data"
|
|
|
- :on-success="import_success"
|
|
|
- style="display: inline-block; margin: 0 10px"
|
|
|
- >
|
|
|
- <el-button type="primary">导入类别</el-button>
|
|
|
- </el-upload>
|
|
|
- <el-button type="danger" @click="delAdmin">批量删除</el-button>
|
|
|
- </div>
|
|
|
- </el-header>
|
|
|
- <el-main>
|
|
|
- <el-table
|
|
|
- ref="multipleTable"
|
|
|
- :data="tableData"
|
|
|
- tooltip-effect="dark"
|
|
|
- style="width: 100%"
|
|
|
- @selection-change="(val) => (this.activeTableChecked = val)"
|
|
|
- >
|
|
|
- <el-table-column type="selection" width="55"></el-table-column>
|
|
|
- <el-table-column label="姓名">
|
|
|
- <template slot-scope="scope">{{
|
|
|
- scope.row.user_name
|
|
|
- }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="用户名">
|
|
|
- <template slot-scope="scope">{{
|
|
|
- scope.row.user_realname
|
|
|
- }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="手机号">
|
|
|
- <template slot-scope="scope">{{
|
|
|
- scope.row.user_phone
|
|
|
- }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="部门">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{
|
|
|
- scope.row.org.dept_full.reduce(function (path, data) {
|
|
|
- return (path += "/" + data.dept_name || "");
|
|
|
- }, "")
|
|
|
- }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-link type="warning" @click="delSingleAdmin(scope.row)"
|
|
|
- >删除</el-link
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-col> -->
|
|
|
- </el-row>
|
|
|
+ <el-button type="primary" @click="handleAdd('0')">新增</el-button>
|
|
|
+
|
|
|
+ <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="id" default-expand-all>
|
|
|
+ <el-table-column label="类型名称" prop="label">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :class="{ text_bold: scope.row.pid === '0' }">{{ scope.row.label }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-link type="primary" @click="handleAdd(scope.row.id)">新增</el-link>
|
|
|
+ <span style="color: #409eff; margin: 0 10px">|</span>
|
|
|
+ <el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link>
|
|
|
+ <span style="color: #409eff; margin: 0 10px">|</span>
|
|
|
+ <el-link type="primary" @click="handleDel(scope.row)">删除</el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-dialog title="活动类型管理" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="dialogForm" :rules="rules" ref="dialogFormRef">
|
|
|
+ <!-- <el-form-item label="所属类型" prop="hh_pid">
|
|
|
+ <el-cascader v-model="dialogForm.hh_pid" :options="tableData">
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="类型名称" prop="hh_name">
|
|
|
+ <el-input v-model="dialogForm.hh_name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序" prop="hh_sort">
|
|
|
+ <el-input v-model="dialogForm.hh_sort" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit('dialogForm')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import TreeNav from "@/components/TreeNav/index.vue";
|
|
|
+import { defineComponent, ref } from '@vue/composition-api';
|
|
|
+import { hdlx_list_tree, hdlx_delete, hdlx_add, hdlx_edit } from './api'
|
|
|
+import { Message } from 'element-ui';
|
|
|
+export default defineComponent({
|
|
|
+ setup() {
|
|
|
+ const tableData = ref([]);
|
|
|
|
|
|
-import {
|
|
|
- hdlx_detail,
|
|
|
- hdlx_list_tree,
|
|
|
- hdlx_members_manage,
|
|
|
- org_list_tree,
|
|
|
-} from "./api";
|
|
|
-import axios from "axios";
|
|
|
+ const handleQuery = () => {
|
|
|
+ hdlx_list_tree().then(res => {
|
|
|
+ tableData.value = res.data.one_info;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ handleQuery()
|
|
|
|
|
|
-import { useUserStore } from "@/stores/user";
|
|
|
-const { token } = useUserStore();
|
|
|
+ let dialogMode = undefined //'add'|'edit'
|
|
|
+ function handleAdd(pid) {
|
|
|
+ dialogMode = 'add'
|
|
|
+ dialogForm.value = {
|
|
|
+ hh_pid: pid,
|
|
|
+ hh_name: '',
|
|
|
+ hh_sort: '1',
|
|
|
+ }
|
|
|
+ dialogFormVisible.value = true;
|
|
|
+ }
|
|
|
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- TreeNav,
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 监听传参改变
|
|
|
- tableParams: {
|
|
|
- handler(newData) {
|
|
|
- this.renderTable(newData);
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- deptOptions: [], // 部门组织级联
|
|
|
- hdlxOptions: [], // 活动类型级联
|
|
|
- searchText: "",
|
|
|
- tableData: [],
|
|
|
- // total_rows: 0,
|
|
|
- userDialogVisible: false,
|
|
|
- user_org: {
|
|
|
- uo_user_name: "",
|
|
|
- },
|
|
|
- tableParams: {
|
|
|
- hh_id: "",
|
|
|
- keyword: "",
|
|
|
- },
|
|
|
- activeUserId: "",
|
|
|
- activeTableChecked: [],
|
|
|
- dialogType: "",
|
|
|
- // 导入导出
|
|
|
- import_url: window.globalVariables.api + "hdpb/hdlx/import_template",
|
|
|
- import_data: {},
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.loadingCascadeData();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- import_success() {
|
|
|
- this.$message.success("导入成功");
|
|
|
- this.$refs.tree.getTreeData();
|
|
|
- },
|
|
|
- downloadExcel() {
|
|
|
- const download_url = `${window.globalVariables.api}hdlx_tpl.xlsx?token=${token}&api=json`;
|
|
|
- let tagA = document.createElement("a");
|
|
|
- tagA.download = download_url;
|
|
|
- tagA.href = download_url;
|
|
|
- tagA.click();
|
|
|
- },
|
|
|
- loadingCascadeData() {
|
|
|
- org_list_tree().then((res) => {
|
|
|
- if (res.code === "1") {
|
|
|
- this.deptOptions = res.data.one_info;
|
|
|
- }
|
|
|
- });
|
|
|
- hdlx_list_tree().then((res) => {
|
|
|
- if (res.code === "1") {
|
|
|
- this.hdlxOptions = res.data.one_info;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- updateDeptId(data) {
|
|
|
- this.activeDeptName = data.msg.label;
|
|
|
- this.tableParams.hh_id = data.msg.id;
|
|
|
- },
|
|
|
- renderTable(data = this.tableParams) {
|
|
|
- hdlx_detail(data).then((res) => {
|
|
|
- if (res.code === "1") {
|
|
|
- this.tableData = res.data.one_info.members;
|
|
|
- // this.total_rows = res.data.total_rows * 1
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取用户多选列表
|
|
|
- getCheckedUsers() {
|
|
|
- const checkedDatas = this.activeTableChecked;
|
|
|
- if (checkedDatas.length <= 0) {
|
|
|
- this.$message.info("请勾选需要操作的用户");
|
|
|
- return false;
|
|
|
+ function handleEdit(row) {
|
|
|
+ dialogMode = 'edit'
|
|
|
+ dialogForm.value = {
|
|
|
+ hh_id: row.id,
|
|
|
+ // hh_pid: row.pid,
|
|
|
+ hh_name: row.label,
|
|
|
+ hh_sort: row.sort,
|
|
|
}
|
|
|
- let user_id_list = [];
|
|
|
- checkedDatas.forEach((item) => {
|
|
|
- item.user_id ? user_id_list.push(item.user_id) : null;
|
|
|
- });
|
|
|
- return user_id_list;
|
|
|
- },
|
|
|
- delAdmin() {
|
|
|
- let user_id_list = this.getCheckedUsers();
|
|
|
- if (user_id_list) {
|
|
|
- this.$confirm("此操作将删除多个管理员, 是否继续?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
+ dialogFormVisible.value = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleDel(row) {
|
|
|
+ this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ hdlx_delete({
|
|
|
+ hh_id: row.id
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === '1') {
|
|
|
+ Message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ });
|
|
|
+ handleQuery()
|
|
|
+ } else { }
|
|
|
})
|
|
|
- .then(() => {
|
|
|
- const data = {
|
|
|
- hhg_id: this.tableParams.hh_id,
|
|
|
- type: "del",
|
|
|
- user_ids: this.getCheckedUsers().toString(),
|
|
|
- };
|
|
|
- hdlx_members_manage(data).then((res) => {
|
|
|
- if (res.code === "1") {
|
|
|
- this.$message.success("删除成功");
|
|
|
- this.renderTable();
|
|
|
+ }).catch(() => {
|
|
|
+ Message.info('已取消删除')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const dialogFormVisible = ref(false);
|
|
|
+ const dialogForm = ref({
|
|
|
+ hh_pid: '',
|
|
|
+ hh_name: '',
|
|
|
+ hh_sort: '1'
|
|
|
+ });
|
|
|
+ const rules = {
|
|
|
+ hh_pid: [
|
|
|
+ { required: true, message: '请选择所属类型', trigger: 'submit' },
|
|
|
+
|
|
|
+ ],
|
|
|
+ hh_name: [
|
|
|
+ { required: true, message: '请输入类型名称', trigger: 'submit' },
|
|
|
+ ],
|
|
|
+ hh_sort: [
|
|
|
+ { required: true, message: '请输入排序', trigger: 'submit' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ const dialogFormRef = ref()
|
|
|
+ function onSubmit() {
|
|
|
+ console.log('dialogFormRef :>> ', dialogFormRef);
|
|
|
+ dialogFormRef.value.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (dialogMode === 'add') {
|
|
|
+ hdlx_add({ hdpb_hdlx: dialogForm.value }).then(res => {
|
|
|
+ if (res.code === '1') {
|
|
|
+ Message({
|
|
|
+ type: 'success',
|
|
|
+ message: '新增成功!'
|
|
|
+ });
|
|
|
+ dialogFormVisible.value = false;
|
|
|
+ handleQuery()
|
|
|
+ } else { }
|
|
|
+ })
|
|
|
+ } else if (dialogMode === 'edit') {
|
|
|
+ hdlx_edit({
|
|
|
+ hh_id: dialogForm.value.hh_id,
|
|
|
+ hdpb_hdlx: {
|
|
|
+ hh_name: dialogForm.value.hh_name,
|
|
|
+ hh_sort: dialogForm.value.hh_sort,
|
|
|
}
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.$message({
|
|
|
- type: "info",
|
|
|
- message: "已取消删除",
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- delSingleAdmin(row) {
|
|
|
- console.log(row);
|
|
|
- this.$confirm(
|
|
|
- `此操作将删除\"管理员\"${row.user_realname}, 是否继续?`,
|
|
|
- "提示",
|
|
|
- {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === '1') {
|
|
|
+ Message({
|
|
|
+ type: 'success',
|
|
|
+ message: '编辑成功!'
|
|
|
+ });
|
|
|
+ dialogFormVisible.value = false;
|
|
|
+ handleQuery()
|
|
|
+ } else { }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
}
|
|
|
- )
|
|
|
- .then(() => {
|
|
|
- const data = {
|
|
|
- hh_id: this.tableParams.hh_id,
|
|
|
- type: "del",
|
|
|
- user_ids: row.user_id,
|
|
|
- };
|
|
|
- hdlx_members_manage(data).then((res) => {
|
|
|
- if (res.code === "1") {
|
|
|
- this.$message.success("删除成功");
|
|
|
- this.renderTable();
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.$message({
|
|
|
- type: "info",
|
|
|
- message: "已取消删除",
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ });
|
|
|
+ // this.$refs.dialogFormRef.validate(valid => {
|
|
|
+ // if (valid) {
|
|
|
+ // this.$refs.dialogFormRef.resetFields();
|
|
|
+ // this.dialogFormVisible = false;
|
|
|
+ // } else {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ tableData,
|
|
|
+ handleAdd,
|
|
|
+ handleEdit,
|
|
|
+ handleDel,
|
|
|
+ dialogFormRef,
|
|
|
+ dialogForm,
|
|
|
+ rules,
|
|
|
+ dialogFormVisible,
|
|
|
+ onSubmit
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
|
|
|
-::v-deep .el-cascader {
|
|
|
- display: block;
|
|
|
+<style lang="scss">
|
|
|
+.text_bold {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 15px;
|
|
|
}
|
|
|
</style>
|