| | |
| | | v-model="daterangeCreateTime" |
| | | size="small" |
| | | style="width: 240px" |
| | | value-format="yyyy-MM-dd" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="daterange" |
| | | range-separator="-" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | :default-time="['00:00:00', '23:59:59']" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item> |
| | |
| | | v-hasPermi="['demo:tree:add']" |
| | | >新增</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="info" |
| | | plain |
| | | icon="el-icon-sort" |
| | | size="mini" |
| | | @click="toggleExpandAll" |
| | | >展开/折叠</el-button> |
| | | </el-col> |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table |
| | | v-if="refreshTable" |
| | | v-loading="loading" |
| | | :data="treeList" |
| | | row-key="id" |
| | | default-expand-all |
| | | :default-expand-all="isExpandAll" |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
| | | > |
| | | <el-table-column label="父id" prop="parentId" /> |
| | |
| | | <el-table-column label="用户id" align="center" prop="userId" /> |
| | | <el-table-column label="树节点名" align="center" prop="treeName" /> |
| | | <el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
| | | <template slot-scope="scope"> |
| | | <template #default="scope"> |
| | | <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| | | <template slot-scope="scope"> |
| | | <template #default="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">确 定</el-button> |
| | | <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button> |
| | | <el-button @click="cancel">取 消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { listTree, getTree, delTree, addTree, updateTree, exportTree } from "@/api/demo/tree"; |
| | | import { listTree, getTree, delTree, addTree, updateTree } from "@/api/demo/tree"; |
| | | import Treeselect from "@riophae/vue-treeselect"; |
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
| | | |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | //按钮loading |
| | | buttonLoading: false, |
| | | // 遮罩层 |
| | | loading: true, |
| | | // 显示搜索条件 |
| | |
| | | title: "", |
| | | // 是否显示弹出层 |
| | | open: false, |
| | | // 是否展开,默认全部展开 |
| | | isExpandAll: true, |
| | | // 重新渲染表格状态 |
| | | refreshTable: true, |
| | | // 创建时间时间范围 |
| | | daterangeCreateTime: [], |
| | | // 查询参数 |
| | |
| | | this.open = true; |
| | | this.title = "添加测试树表"; |
| | | }, |
| | | /** 展开/折叠操作 */ |
| | | toggleExpandAll() { |
| | | this.refreshTable = false; |
| | | this.isExpandAll = !this.isExpandAll; |
| | | this.$nextTick(() => { |
| | | this.refreshTable = true; |
| | | }); |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | | this.loading = true; |
| | |
| | | submitForm() { |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | this.loading = true; |
| | | this.buttonLoading = true; |
| | | if (this.form.id != null) { |
| | | updateTree(this.form).then(response => { |
| | | this.loading = false; |
| | | this.msgSuccess("修改成功"); |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }).finally(() => { |
| | | this.buttonLoading = false; |
| | | }); |
| | | } else { |
| | | addTree(this.form).then(response => { |
| | | this.loading = false; |
| | | this.msgSuccess("新增成功"); |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }).finally(() => { |
| | | this.buttonLoading = false; |
| | | }); |
| | | } |
| | | } |
| | |
| | | }, |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | this.$confirm('是否确认删除测试树表编号为"' + row.id + '"的数据项?', "警告", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }).then(() => { |
| | | this.$modal.confirm('是否确认删除测试树表编号为"' + row.id + '"的数据项?').then(() => { |
| | | this.loading = true; |
| | | return delTree(row.id); |
| | | }).then(() => { |
| | | this.loading = false; |
| | | this.getList(); |
| | | this.msgSuccess("删除成功"); |
| | | }) |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).finally(() => { |
| | | this.loading = false; |
| | | }); |
| | | } |
| | | } |
| | | }; |