corporationOverview.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <template>
  2. <div style="height:100%">
  3. <p class="info">公司总览</p>
  4. <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
  5. :cell-style="{ textAlign: 'center' }" height="400" style="width: 98%" @selection-change="handleSelectionChange">
  6. <el-table-column type="selection" width="50">
  7. </el-table-column>
  8. <el-table-column prop="company_name" label="公司名称">
  9. </el-table-column>
  10. <el-table-column prop="code" label="社会信用代码">
  11. </el-table-column>
  12. <el-table-column prop="legal_person_name" label="公司法人">
  13. </el-table-column>
  14. <el-table-column prop="contact_person" label="联系人">
  15. </el-table-column>
  16. <el-table-column prop="contact_phone" label="联系电话">
  17. </el-table-column>
  18. <el-table-column prop="operation" label="操作">
  19. <template slot-scope="scope">
  20. <el-button size="mini" type="text" style="color: #2ea8e6" @click="infoDetail(scope.row)">查看</el-button>
  21. <el-button size="mini" type="text" style="color: #2ea8e6" @click="infoEdit(scope.row)">编辑</el-button>
  22. <el-button size="mini" type="text" style="color: #2ea8e6" @click="deleteInfo(scope.row)">删除</el-button>
  23. </template>
  24. </el-table-column>
  25. </el-table>
  26. <div class="bottom">
  27. <page class="page" :paginationData="paginationData"></page>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import checkbox from '@/components/Checkbox/index';
  33. import page from '@/components/pagination/index';
  34. import {delCompanyInfo, getAllCompanyList, getCompanyList} from "@/api/company/company";
  35. export default {
  36. components: { checkbox, page },
  37. emits: ['nodeClick'],
  38. data() {
  39. return {
  40. filterText: '',
  41. tableData: [{
  42. corporation_name: '中讯邮电咨询设计院有限公司',
  43. Sccode: '4032',
  44. legal_person: '张三',
  45. contact_person: '张三',
  46. contact_phone: '12345678901',
  47. }, {
  48. corporation_name: '北京电信规划院有限公司',
  49. Sccode: '9416',
  50. legal_person: '李四',
  51. contact_person: '李四',
  52. contact_phone: '12345678901',
  53. }, {
  54. corporation_name: '北京电信规划院有限公司',
  55. Sccode: '9416',
  56. legal_person: '李四',
  57. contact_person: '李四',
  58. contact_phone: '12345678901',
  59. }],
  60. multipleSelection: [],
  61. currentPageSize: 10,
  62. currentPage: 1,
  63. paginationData: {
  64. pageSize: 10,
  65. pagerCount: 5,
  66. currentPage: 1,
  67. pageSizes: [5, 10, 20, 30],
  68. total: 30,
  69. currentChange: (val) => {
  70. this.getTableData(val);
  71. },
  72. handleSizeChange: (val) => {
  73. this.handleSizeChange(val);
  74. },
  75. },
  76. }
  77. },
  78. watch: {
  79. filterText(val) {
  80. //
  81. }
  82. },
  83. mounted() {
  84. this.initData();
  85. },
  86. methods: {
  87. handleClick() {
  88. //
  89. },
  90. handleSelectionChange(val) {
  91. this.multipleSelection = val;
  92. },
  93. initData() {
  94. this.getTableData(1);
  95. },
  96. getTableData(page) {
  97. getAllCompanyList('', this.paginationData.currentPage, this.paginationData.pageSize).then(res=>{
  98. let data = res.data;
  99. if (data.code == '0') {
  100. this.paginationData.total = data.total
  101. this.tableData = data.data
  102. } else {
  103. this.$message.error(data.message);
  104. }
  105. })
  106. },
  107. infoDetail(data) {
  108. data.type='company'
  109. this.$emit('nodeClick', data)
  110. },
  111. infoEdit(data) {
  112. data.type='company'
  113. this.$emit('nodeClick', data)
  114. },
  115. deleteInfo(data) {
  116. this.$confirm('确定要删除吗?', '提示', {
  117. type: 'warning'
  118. }).then(()=>{
  119. delCompanyInfo(data.id).then(res=>{
  120. let data = res.data;
  121. if (data.code == 0) {
  122. this.getTableData(1)
  123. this.$message.success('删除成功');
  124. } else {
  125. this.$message.error(data.message);
  126. }
  127. })
  128. })
  129. },
  130. batchDelete() {
  131. },
  132. addCompany(){
  133. this.$refs.corporationAdd.dialogVisible = true;
  134. setTimeout(() => {
  135. this.$refs.corporationAdd.resetForm();
  136. }, 100)
  137. }
  138. }
  139. }
  140. </script>
  141. <style lang="less" scoped>
  142. .info {
  143. padding: 20px 20px 20px 40px;
  144. font-size: 16px;
  145. text-align: left;
  146. }
  147. .delete {
  148. padding: 3px;
  149. width: 80px;
  150. height: 30px;
  151. float: left;
  152. left: 90px;
  153. position: relative;
  154. color: #fff;
  155. border-radius: 4px;
  156. right: 10px;
  157. background-color: #b3b3b3;
  158. }
  159. .el-table {
  160. position: relative;
  161. top: 10px;
  162. margin-left: 1%;
  163. height: 400px;
  164. border: 1px solid #f0f2f2;
  165. font-size: 14px;
  166. font-family: PingFang SC,serif;
  167. font-weight: 500;
  168. color: #b2b2b2;
  169. background: rgba(255, 255, 255, 0.8);
  170. /deep/th {
  171. background: #f7fbff;
  172. }
  173. /deep/.el-checkbox {
  174. color: #b2b2b2;
  175. .el-checkbox__input.is-checked+.el-checkbox__label {
  176. color: #2ea8e6;
  177. }
  178. .el-checkbox__input.is-checked .el-checkbox__inner::after {
  179. width: 70%;
  180. height: 70%;
  181. background: #2ea8e6;
  182. border-radius: 0;
  183. transform: rotate(0deg) scaleY(1);
  184. position: static;
  185. // border: 1px solid #8DD9FF;
  186. }
  187. .el-checkbox__inner {
  188. border: 1px solid #8dd9ff;
  189. background: rgba(0, 170, 255, 0);
  190. display: flex;
  191. align-items: center;
  192. justify-content: center;
  193. position: static;
  194. &::after {
  195. transition: 0ms;
  196. }
  197. }
  198. .el-checkbox__label {
  199. padding-left: 0;
  200. font-size: 15px;
  201. position: absolute;
  202. top: 1px;
  203. left: 25px;
  204. }
  205. }
  206. }
  207. .addCompany {
  208. position: absolute;
  209. left: 40px;
  210. bottom: 15px;
  211. width: 250px;
  212. text-align: center;
  213. font-size: 14px;
  214. height: 30px;
  215. padding: 8px 12px;
  216. }
  217. .bottom {
  218. position: absolute;
  219. right: 16px;
  220. bottom: 20px;
  221. height: 50px;
  222. line-height: 20px;
  223. background-color: #ffffff;
  224. text-align: center;
  225. }
  226. </style>