|
|
@@ -0,0 +1,363 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <templateTable :formList="formList" :searchData.sync="queryFrom" :tableConfig="tableConfig" :btnGroup="btnGroup"
|
|
|
+ :data="pageResult" @getList="findPage" @handleSearchList="handleSearchList" :pagination="pageData">
|
|
|
+ <template slot="enabled" slot-scope="scope">
|
|
|
+ <el-switch
|
|
|
+ v-model="scope.row.enabled"
|
|
|
+ active-text="启动"
|
|
|
+ inactive-text="关闭"
|
|
|
+ :inactive-value="0"
|
|
|
+ :active-value="1"
|
|
|
+ @change="switchChange(scope.row)"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </template>
|
|
|
+ </templateTable>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增修改界面 -->
|
|
|
+ <el-dialog :title="dialogTitle" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false"
|
|
|
+ :before-close="handleDialogBefore" @close="closeDialog" v-dialogDrag>
|
|
|
+ <el-form :model="formData" :rules="rules" ref="formData" :inline="true" label-width="110px" size="small">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="模块名称" prop="project">
|
|
|
+ <el-input v-model="formData.project"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="功能名称" prop="functionName">
|
|
|
+ <el-input v-model="formData.functionName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="keyword" prop="keyword">
|
|
|
+ <el-input v-model="formData.keyword"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否启动" prop="enabled">
|
|
|
+ <el-radio-group v-model="formData.enabled">
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
+ <el-radio :label="1">启动</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="submitForm">提交</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import templateTable from "@/components/TemplateTable/index.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ templateTable,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formList: [
|
|
|
+ {
|
|
|
+ prop: "project",
|
|
|
+ label: "模块名称",
|
|
|
+ type: "input",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "functionName",
|
|
|
+ label: "功能名称",
|
|
|
+ type: "input",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "keyword",
|
|
|
+ label: "keyword",
|
|
|
+ type: "input",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "是否启动",
|
|
|
+ prop: "enabled",
|
|
|
+ type: "select",
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: "启动",
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "关闭",
|
|
|
+ value: '0',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ btnGroup: [
|
|
|
+ {
|
|
|
+ name: "新增",
|
|
|
+ click: (row, index) => { return this.handleAddButton() },
|
|
|
+
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableConfig: {
|
|
|
+ columns: [
|
|
|
+ // 数据列
|
|
|
+ { prop: "project", label: "模块名称", type: "text" },
|
|
|
+ { prop: "functionName", label: "功能名称", type: "text" },
|
|
|
+ { prop: "keyword", label: "keyword", type: "text" },
|
|
|
+ { name: "enabled", label: "是否启动", type: "slot" },
|
|
|
+ ],
|
|
|
+ loading: true,
|
|
|
+ isPaginationShow: true,
|
|
|
+ isShowIndex: true,
|
|
|
+ optBtns: [
|
|
|
+ {
|
|
|
+ type: "primary",
|
|
|
+ label: "编辑",
|
|
|
+ perm: "sys:agent:edit",
|
|
|
+ icon: "fa fa-edit",
|
|
|
+ click: (row, index) => {
|
|
|
+ return this.handleTableEdit(row);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "primary",
|
|
|
+ label: "删除",
|
|
|
+ icon: "el-icon-delete",
|
|
|
+ click: (row, index) => {
|
|
|
+ return this.handleTableDeleteFlag(row);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ functionName: [
|
|
|
+ { required: true, message: '请输入功能名称', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ keyword: [
|
|
|
+ { required: true, message: '请输入keyword', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ project: [
|
|
|
+ { required: true, message: '请选择模块名称', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ pageData: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalSize: 0,
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ enabled: 0,
|
|
|
+ functionName: "",
|
|
|
+ keyword: "",
|
|
|
+ project: ""
|
|
|
+ },
|
|
|
+ queryFrom: {},
|
|
|
+ pageResult: [],
|
|
|
+ dialogTitle: "",
|
|
|
+ dialogVisible: false, // 新增编辑界面是否显示
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.findPage()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 开关
|
|
|
+ switchChange(data) {
|
|
|
+ console.log(data)
|
|
|
+ let datas = {
|
|
|
+ enabled: data.enabled,
|
|
|
+ functionName: data.functionName,
|
|
|
+ keyword: data.keyword,
|
|
|
+ project: data.project,
|
|
|
+ id: data.id
|
|
|
+ }
|
|
|
+ this.$api.sys
|
|
|
+ .putSwitch(datas)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: "设置成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.$refs["formData"].resetFields();
|
|
|
+ this.findPage();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: `设置失败,(${res.msg})`,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 右侧列表的方法Start
|
|
|
+ findPage(data) {
|
|
|
+ this.tableConfig.loading = true;
|
|
|
+ this.$api.sys
|
|
|
+ .switchPage({
|
|
|
+ ...this.pageData,
|
|
|
+ ...data,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.tableConfig.loading = false;
|
|
|
+ this.pageResult = res.data.content;
|
|
|
+ this.pageData.pageNum = res.data.pageNum;
|
|
|
+ this.pageData.pageSize = res.data.pageSize;
|
|
|
+ this.pageData.totalSize = res.data.totalSize;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSearchList(data) {
|
|
|
+ console.log(data)
|
|
|
+ this.findPage(data);
|
|
|
+ },
|
|
|
+ //编辑
|
|
|
+ async handleTableEdit(params) {
|
|
|
+ this.dialogTitle = "编辑";
|
|
|
+ this.formData = {...params}
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ // 删除单个人员
|
|
|
+ handleTableDeleteFlag(data) {
|
|
|
+ this.$confirm("确认删除?")
|
|
|
+ .then(() => {
|
|
|
+ this.$api.sys.deleteSwitch(data.id).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ },
|
|
|
+ //添加人员
|
|
|
+ handleAddButton() {
|
|
|
+ this.dialogTitle = "新增";
|
|
|
+ this.formData = {
|
|
|
+ enabled: 0,
|
|
|
+ functionName: "",
|
|
|
+ keyword: "",
|
|
|
+ project: ""
|
|
|
+ }
|
|
|
+ if (this.$refs["formData"]) {
|
|
|
+ this.$refs["formData"].resetFields();
|
|
|
+ }
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleDialogBefore(done) {
|
|
|
+ // 退出对话框之前确认提示
|
|
|
+ this.$confirm("确认关闭?")
|
|
|
+ .then((_) => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch((_) => { });
|
|
|
+ },
|
|
|
+ closeDialog() {
|
|
|
+ // 清空数据
|
|
|
+ this.deptInfo = {};
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ submitForm() {
|
|
|
+ this.$refs.formData.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$confirm("确认提交吗?", "提示", {}).then(() => {
|
|
|
+ if (this.dialogTitle == "新增") {
|
|
|
+ this.$api.sys
|
|
|
+ .addSwitch(this.formData)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: "保存成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$refs["formData"].resetFields();
|
|
|
+ this.findPage();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: `保存失败,请重新添加,(${res.msg})`,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ let datas = {
|
|
|
+ enabled: this.formData.enabled,
|
|
|
+ functionName: this.formData.functionName,
|
|
|
+ keyword: this.formData.keyword,
|
|
|
+ project: this.formData.project,
|
|
|
+ id: this.formData.id
|
|
|
+ }
|
|
|
+ this.$api.sys
|
|
|
+ .putSwitch(datas)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: "编辑成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$refs["formData"].resetFields();
|
|
|
+ this.findPage();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: `编辑失败,请重新添加,(${res.msg})`,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 下一步
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-divider--horizontal {
|
|
|
+ margin: 4px 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部查询条件样式Start */
|
|
|
+.queryFrom .el-row {
|
|
|
+ margin: 10px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.queryFrom .el-form-item {
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.queryFrom .queryButton .el-form-item__content {
|
|
|
+ margin-left: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.disc {
|
|
|
+ -webkit-text-security: disc;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.none {
|
|
|
+ -webkit-text-security: none;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ color: #ccc;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 10px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|