qute1.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <el-dialog
  3. title="引用元素表"
  4. :visible.sync="dialogVisible"
  5. width="70%"
  6. append-to-body
  7. destroy-on-close
  8. custom-class="flow-design-dialog"
  9. >
  10. <div class="flexStar" >
  11. <div class="boxswai" style="width:30%;padding-left:0px;height:547px">
  12. <div class="boxnei" style="display: flex;flex-direction: column;">
  13. <div style="overflow: auto;flex:1">
  14. <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" style="display: inline-block;min-width: 100%;"></avue-tree>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="boxswai" style="width:70%;padding-left:0px;padding-right:0px;height:547px">
  19. <div class="boxnei" style="flex:1;">
  20. <avue-crud
  21. :data="loadData"
  22. :option="loadOption"
  23. v-model="obj"
  24. :page.sync="page"
  25. @on-load="quteonLoad"
  26. @selection-change="selectionChange"
  27. ref="crud">
  28. <template slot="menuLeft" slot-scope="{size}">
  29. <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size" clearable>
  30. <i class="el-icon-search" slot="append" @click="searchChange"></i>
  31. </el-input>
  32. </template>
  33. </avue-crud>
  34. </div>
  35. </div>
  36. </div>
  37. <span slot="footer" class="dialog-footer">
  38. <el-button @click="dialogVisible = false">取 消</el-button>
  39. <el-button type="primary" @click="submitQute">确 定</el-button>
  40. </span>
  41. </el-dialog>
  42. </template>
  43. <script>
  44. import {tabTypeLazyTreeAll,projecttabInfo} from "@/api/manager/wbsprivate";
  45. export default {
  46. data() {
  47. return {
  48. input3:'',
  49. dialogVisible:false,
  50. obj: {},
  51. treeData:[],
  52. treeOption:{
  53. filter:false,
  54. addBtn:false,
  55. indexFixed:false,
  56. selectionFixed:false,
  57. expandFixed:false,
  58. props:{
  59. labelText:'标题',
  60. label:'title',
  61. value:'id',
  62. children:'children'
  63. },
  64. lazy: true,
  65. treeLoad: function (node, resolve) {
  66. const parentId = (node.level === 0) ? 12345678910 : node.data.id;
  67. tabTypeLazyTreeAll({parentId,current:1,size:1000}).then(res => {
  68. resolve(res.data.data.records.map(item => {
  69. return {
  70. ...item,
  71. leaf: !item.hasChildren
  72. }
  73. }))
  74. });
  75. },
  76. },
  77. selectionList:[],
  78. loadData:[],
  79. loadOption: {
  80. height: 'auto',
  81. calcHeight: 30,
  82. tip: false,
  83. searchShow:false,
  84. border: true,
  85. index: true,
  86. viewBtn: false,
  87. selection: true,
  88. editBtn:false,
  89. delBtn:false,
  90. addBtn:false,
  91. menu:false,
  92. dialogClickModal: false,
  93. column: [
  94. {
  95. label: "元素表名称",
  96. prop: "title",
  97. editDisplay: false,
  98. addDisplay: false,
  99. },
  100. {
  101. label: "元素表类型",
  102. prop: "tabType",
  103. // search: true,
  104. rules: [
  105. {
  106. required: true,
  107. message: "请输入名称",
  108. trigger: "blur",
  109. },
  110. ],
  111. },
  112. {
  113. label: "元素总量",
  114. prop: "elementTotal",
  115. editDisplay: false,
  116. addDisplay: false,
  117. rules: [
  118. {
  119. message: "请输入表数量",
  120. trigger: "blur",
  121. },
  122. ],
  123. },
  124. {
  125. label: "所书方",
  126. prop: "tabOwner",
  127. editDisplay: false,
  128. addDisplay: false,
  129. rules: [
  130. {
  131. message: "请输入表数量",
  132. trigger: "blur",
  133. },
  134. ],
  135. },
  136. {
  137. label: "填报率",
  138. prop: "fillRate",
  139. editDisplay: false,
  140. addDisplay: false,
  141. rules: [
  142. {
  143. message: "请输入表数量",
  144. trigger: "blur",
  145. },
  146. ],
  147. },
  148. ],
  149. },
  150. page:{
  151. current:1,
  152. size:10,
  153. total:10
  154. },
  155. treeId:''
  156. }
  157. },
  158. props:{
  159. projectid:String,
  160. onLoad1:Function,
  161. refreshTree:Function
  162. },
  163. computed:{
  164. ids () {
  165. let ids = [];
  166. this.selectionList.forEach(ele => {
  167. ids.push(ele.id);
  168. });
  169. return ids.join(",");
  170. }
  171. },
  172. created(){
  173. // this.loadData=this.loadData1;
  174. },
  175. methods: {
  176. quteonLoad(page){
  177. console.log(page,'page');
  178. if(this.treeId){
  179. this.tabTypeLazyTreeAll(this.treeId, page.currentPage,page.pageSize).then((res)=>{
  180. this.loadData=res.records
  181. this.page.total=res.total
  182. })
  183. }
  184. },
  185. selectionChange (list) {
  186. this.selectionList = list;
  187. },
  188. selectionClear () {
  189. this.selectionList = [];
  190. this.$refs.crud.toggleSelection();
  191. },
  192. //搜索
  193. searchChange(){
  194. if(this.treeId){
  195. this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size,this.input3).then((res)=>{
  196. this.loadData=res.records
  197. this.page.total=res.total
  198. })
  199. }else{
  200. this.$message.warning("请先选择左侧节点");
  201. }
  202. },
  203. resetChange(item){
  204. console.log(item);
  205. this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size).then((res)=>{
  206. this.loadData=res.records
  207. this.page.total=res.total
  208. })
  209. },
  210. async tabTypeLazyTreeAll ( parentId,current,size,titleName) {//清表树
  211. console.log(parentId);
  212. const { data: res } = await tabTypeLazyTreeAll({parentId,current,size,titleName} )
  213. console.log(res,'tabTypeLazyTreeAll');
  214. if (res.code === 200) {
  215. return res.data
  216. }
  217. },
  218. nodeClick(data,node){
  219. console.log(data,'treedata');
  220. this.treeId=data.id
  221. if(data.hasChildren){
  222. this.tabTypeLazyTreeAll(data.id, this.page.current,this.page.size).then((res)=>{
  223. this.loadData=res.records
  224. this.page.total=res.total
  225. })
  226. }
  227. if(data.hasChildren===false&&node.level==2){
  228. let arr=[]
  229. arr.push(data)
  230. this.loadData=arr
  231. this.page.total=1
  232. }else{
  233. this.loadData=[]
  234. this.page.total=0
  235. }
  236. },
  237. handleClose(done) {
  238. this.$confirm('确认关闭?')
  239. .then(_ => {
  240. done();
  241. })
  242. .catch(_ => {});
  243. },
  244. show(){
  245. this.dialogVisible=true;
  246. },
  247. submitQute(){
  248. console.log('确定');
  249. console.log(this.ids,'ids');
  250. projecttabInfo(this.ids,this.projectid).then((res)=>{
  251. console.log(res,'res');
  252. if(res.data.code===200){
  253. this.$message({
  254. type: "success",
  255. message: "操作成功!"
  256. });
  257. this.$refs.crud.toggleSelection();
  258. this.dialogVisible=false;
  259. this.onLoad1();
  260. this.refreshTree()
  261. }
  262. })
  263. }
  264. },
  265. }
  266. </script>
  267. <style scoped lang="scss">
  268. /deep/.avue-crud__left{
  269. width: 75% !important;
  270. }
  271. .boxswai1 .boxnei {
  272. -webkit-box-sizing: border-box;
  273. box-sizing: border-box;
  274. width: 100%;
  275. height: 100%;
  276. background-color: #fff;
  277. padding: 14px;
  278. border: 1px solid #ebeef5;
  279. border-radius: 4px;
  280. -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  281. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  282. overflow: auto;
  283. }
  284. </style>