edit.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <basic-container>
  3. <div class="flex">
  4. <div class="flex1 mg-r-20">
  5. <p>工程节点信息</p>
  6. <div class="flex">
  7. <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
  8. <el-button type="info" class="mg-l-20">导入划分</el-button>
  9. </div>
  10. <el-tree
  11. class="filter-tree" lazy
  12. :load="loadNode" @node-click="getNodeDetail"
  13. :props="defaultProps"
  14. highlight-current
  15. :filter-node-method="filterNode"
  16. ref="tree">
  17. <span class="custom-tree-node" slot-scope="{ node, data }">
  18. <span>
  19. {{ node.label }}
  20. <el-dropdown @click="command=>{setLeftType(command,data)}">
  21. <el-button
  22. type="text" icon="el-icon-more" class="normal-black">
  23. </el-button>
  24. <el-dropdown-menu slot="dropdown">
  25. <el-dropdown-item @click.native="setLeftType(1,data,node)" icon="el-icon-circle-plus-outline">新增子级</el-dropdown-item>
  26. <el-dropdown-item @click.native="setLeftType(2,data,node)" icon="el-icon-edit">编辑节点</el-dropdown-item>
  27. <el-dropdown-item @click.native="setLeftType(3,data,node)" icon="el-icon-document-copy">复制节点</el-dropdown-item>
  28. <el-dropdown-item @click.native="setLeftType(4,data,node)" icon="iconfont hcicon-danganziliao-biaogetianxie" class="font-s-12">表单设置</el-dropdown-item>
  29. <el-dropdown-item @click.native="setLeftType(5,data,node)" icon="el-icon-coin">元素设置</el-dropdown-item>
  30. </el-dropdown-menu>
  31. </el-dropdown>
  32. </span>
  33. </span>
  34. </el-tree>
  35. </div>
  36. <div class="flex1">
  37. <template v-if="leftType==2 || leftType==1">
  38. <p>节点信息</p>
  39. <el-table :data="tableData" border style="width: 100%">
  40. <el-table-column align="center" prop="deptName" label="当前节点" ></el-table-column>
  41. <el-table-column align="center" prop="deptCategory" label="节点类型" width="180"></el-table-column>
  42. <el-table-column align="center" prop="parentName" label="上级节点"></el-table-column>
  43. </el-table>
  44. </template>
  45. <template v-if="leftType==4">
  46. <el-table :data="formData" border style="width: 100%">
  47. <el-table-column align="center" prop="tableName" label="表单名称" ></el-table-column>
  48. <el-table-column align="center" prop="tableType" label="表单类型"></el-table-column>
  49. <el-table-column align="center" prop="elementTotal" label="元素总量"></el-table-column>
  50. <el-table-column align="center" prop="isCreateTable" label="是否创建表"></el-table-column>
  51. <el-table-column align="center" prop="tableName" label="所属方"></el-table-column>
  52. <el-table-column label="操作">
  53. <template slot-scope="scope">
  54. <el-button
  55. size="mini"
  56. @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  57. <el-button
  58. size="mini"
  59. type="danger"
  60. @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  61. </template>
  62. </el-table-column>
  63. </el-table>
  64. </template>
  65. </div>
  66. </div>
  67. <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" append-to-body>
  68. <el-form ref="nodeDetail" :model="nodeDetail" label-width="110px">
  69. <el-form-item label="节点名称">
  70. <el-input v-model="nodeDetail.deptName"></el-input>
  71. </el-form-item>
  72. <el-form-item label="上级节点">
  73. <el-input v-model="nodeDetail.parentName" disabled></el-input>
  74. </el-form-item>
  75. <el-form-item label="节点类型">
  76. <el-select v-model="nodeDetail.deptCategory" placeholder="请选择" class="w-100p">
  77. <el-option v-for="item in deptCategorylist" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  78. </el-select>
  79. </el-form-item>
  80. <el-form-item label="划分编号">
  81. <el-input v-model="nodeDetail.partitionCode"></el-input>
  82. </el-form-item>
  83. <el-form-item label="唯一编码">
  84. <el-input v-model="nodeDetail.uniqueCode"></el-input>
  85. </el-form-item>
  86. <el-form-item label="是否有混凝土">
  87. <el-radio-group v-model="nodeDetail.isConcrete" size="small">
  88. <el-radio :label="0" border>无</el-radio>
  89. <el-radio :label="1" border>有</el-radio>
  90. </el-radio-group>
  91. </el-form-item>
  92. <el-form-item label="是否试验节点">
  93. <el-radio-group v-model="nodeDetail.isExpernode" size="small">
  94. <el-radio :label="0" border>否</el-radio>
  95. <el-radio :label="1" border>是</el-radio>
  96. </el-radio-group>
  97. </el-form-item>
  98. <el-form-item label="试验节点">
  99. <el-input v-model="nodeDetail.remark" type="textarea"></el-input>
  100. </el-form-item>
  101. </el-form>
  102. <span slot="footer" class="dialog-footer">
  103. <el-button @click="dialogVisible = false">取 消</el-button>
  104. <el-button type="primary" @click="saveNode">确 定</el-button>
  105. </span>
  106. </el-dialog>
  107. </basic-container>
  108. </template>
  109. <script>
  110. import {getLazytree,getDetail,update,selectByNodeTable} from "@/api/manager/wbstree";
  111. import {getDictionary} from "@/api/system/dict";
  112. import {mapGetters} from "vuex";
  113. export default {
  114. data() {
  115. return {
  116. id:'',
  117. filterText:'',
  118. treeData:[],
  119. defaultProps: {
  120. children: 'children',
  121. label: 'title',
  122. isLeaf: function(data){
  123. return !data.hasChildren;
  124. }
  125. },
  126. leftType:2,
  127. curTreeData:{},
  128. tableData:[],
  129. nodeDetail:{},
  130. formData:[],
  131. dialogVisible:false,
  132. deptCategorylist:[],
  133. };
  134. },
  135. computed: {
  136. ...mapGetters(["userInfo"]),
  137. dialogTitle:function(){
  138. let text = '节点';
  139. if(this.leftType == 1){
  140. text = '新增'+text;
  141. }else if(this.leftType == 2){
  142. text = '编辑'+text;
  143. }
  144. return text;
  145. },
  146. },
  147. created() {
  148. this.init();
  149. },
  150. methods: {
  151. init(){
  152. this.id = this.$route.params.id;
  153. },
  154. loadNode(node, resolve){
  155. let pid = 0;
  156. if (node.level != 0) {
  157. pid = node.data.id
  158. }
  159. getLazytree(this.id ,pid).then((res)=>{
  160. return resolve(res.data.data);
  161. })
  162. },
  163. getNodeDetail(data,node){
  164. //console.log(data,node,ref)
  165. let parentName = '';
  166. if(node.parent.data){
  167. parentName = node.parent.data.title;
  168. }
  169. this.curTreeData = data;
  170. this.curTreeData.parentName = parentName;
  171. getDetail(data.id).then((res)=>{
  172. res.data.data.parentName = parentName;
  173. this.tableData = [res.data.data];
  174. this.nodeDetail = Object.assign({},res.data.data);
  175. })
  176. },
  177. saveNode(){
  178. update(this.nodeDetail).then(()=>{
  179. let node = this.tableData[0];
  180. node.deptName = this.nodeDetail.deptName;
  181. node.deptCategory = this.nodeDetail.deptCategory;
  182. this.curTreeData.title = this.nodeDetail.deptName;
  183. this.dialogVisible = false;
  184. this.$message({
  185. type: "success",
  186. message: "操作成功!"
  187. });
  188. })
  189. },
  190. addNode(){
  191. },
  192. setLeftType(type,data,node){
  193. this.leftType = type;
  194. this.curTreeData = data;
  195. if(this.leftType == 1 || this.leftType == 2){
  196. this.getDeptCategorylist();
  197. this.dialogVisible = true;
  198. }
  199. getDetail(data.id).then((res)=>{
  200. let parentName = '';
  201. if(node.parent.data){
  202. parentName = node.parent.data.title;
  203. }
  204. res.data.data.parentName = parentName;
  205. this.tableData = [res.data.data];
  206. if(this.leftType == 1){
  207. this.nodeDetail = {
  208. parentId:res.data.data.id,
  209. parentName:parentName
  210. };
  211. }else{
  212. this.nodeDetail = Object.assign({},res.data.data);
  213. }
  214. })
  215. if(this.leftType == 4){
  216. selectByNodeTable(data.id).then((res)=>{
  217. console.log(res)
  218. })
  219. }
  220. },
  221. getDeptCategorylist(){
  222. if(this.deptCategorylist.length >1){
  223. return;
  224. }
  225. getDictionary({
  226. code:'wbs_node_type'
  227. }).then((res)=>{
  228. this.deptCategorylist = res.data.data;
  229. })
  230. },
  231. filterNode(value, data) {
  232. if (!value) return true;
  233. return data.label.indexOf(value) !== -1;
  234. }
  235. }
  236. };
  237. </script>
  238. <style scoped lang="scss">
  239. .font-s-12 /deep/ .iconfont{
  240. font-size: 12px;
  241. }
  242. .el-popper[x-placement^=bottom]{
  243. margin-top: -6px;
  244. }
  245. </style>