childs.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="20">
  4. <!--部门数据-->
  5. <!-- el-col :span="4" :xs="24" >
  6. <div class="head-container">
  7. </div>
  8. <div class="head-container" style="overflow-x:scroll">
  9. <el-tree
  10. :props="defaultProps"
  11. ref="tree"
  12. :load="loadNode"
  13. :data="channelOptions"
  14. lazy
  15. @node-click="handleNodeClick"
  16. />
  17. </div>
  18. </el-col> -->
  19. <!--用户数据-->
  20. <el-col :span="24" :xs="24">
  21. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  22. <el-form-item label="渠道名称" prop="name">
  23. <el-input
  24. v-model="queryParams.name"
  25. placeholder="请输入渠道名称"
  26. clearable
  27. size="small"
  28. style="width: 240px"
  29. @keyup.enter.native="handleQuery"
  30. />
  31. </el-form-item>
  32. <el-form-item label="渠道级别" prop="level">
  33. <el-select
  34. v-model="queryParams.level"
  35. placeholder="选择渠道级别"
  36. clearable
  37. size="small"
  38. @change="handleQuery()"
  39. style="width: 200px;margin-right: 1px;">
  40. <el-option label="全部" value="" />
  41. <el-option label="1级渠道" value="1" />
  42. <el-option label="2级渠道" value="2" />
  43. <el-option label="3级渠道" value="3" />
  44. <el-option label="4级渠道" value="4" />
  45. <el-option label="5级渠道" value="5" />
  46. <el-option label="6级渠道" value="6" />
  47. </el-select>
  48. </el-form-item>
  49. <el-form-item label="手机号码" prop="mobile">
  50. <el-input
  51. v-model="queryParams.mobile"
  52. placeholder="请输入手机号码"
  53. clearable
  54. size="small"
  55. style="width: 240px"
  56. @keyup.enter.native="handleQuery"
  57. />
  58. </el-form-item>
  59. <el-form-item label="地区">
  60. <el-select
  61. v-model="queryParams.provinceId"
  62. placeholder="选择省份"
  63. clearable
  64. size="small"
  65. @change="getCityList()"
  66. style="width: 120px;margin-right: 1px;">
  67. <el-option
  68. v-for="item in provinceList"
  69. :key="item.areaId"
  70. :label="item.areaName"
  71. :value="item.areaId"
  72. />
  73. </el-select>
  74. <el-select
  75. v-model="queryParams.cityId"
  76. placeholder="选择市"
  77. clearable
  78. size="small"
  79. @change="getAreaList()"
  80. style="width: 120px;margin-right: 1px;">
  81. <el-option
  82. v-for="item in cityList"
  83. :key="item.areaId"
  84. :label="item.areaName"
  85. :value="item.areaId"
  86. />
  87. </el-select>
  88. <el-select v-model="queryParams.areaId" placeholder="选择区" clearable size="small" style="width: 120px;margin-right: 1px;">
  89. <el-option
  90. v-for="item in areaList"
  91. :key="item.areaId"
  92. :label="item.areaName"
  93. :value="item.areaId"
  94. />
  95. </el-select>
  96. </el-form-item>
  97. <el-form-item>
  98. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  99. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  100. </el-form-item>
  101. </el-form>
  102. <el-row :gutter="10" class="mb8">
  103. <el-col :span="1.5">
  104. <!-- <el-button
  105. type="primary"
  106. icon="el-icon-plus"
  107. size="mini"
  108. @click="handleAdd"
  109. v-hasPermi="['business:channel:add']"
  110. >添加一级渠道</el-button> -->
  111. 上级渠道 : <span style="font-weight: bold;"> {{title}}</span>
  112. </el-col>
  113. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  114. </el-row>
  115. <el-table v-loading="loading" :data="channelList">
  116. <el-table-column label="渠道编号" prop="channelId" width="100px" />
  117. <el-table-column label="渠道名称" prop="name" show-overflow-tooltip width="180px"/>
  118. <el-table-column label="手机号码" prop="mobile" show-overflow-tooltip width="120px"/>
  119. <el-table-column label="佣金比例" prop="commRate">
  120. <template slot-scope="scope">
  121. {{scope.row.commRate}}%
  122. </template>
  123. </el-table-column>
  124. <el-table-column label="渠道级别" prop="level">
  125. <template slot-scope="scope">
  126. {{scope.row.level}}级渠道
  127. </template>
  128. </el-table-column>
  129. <el-table-column label="经销商数" prop="siteCnt" />
  130. <el-table-column label="用户数" prop="userCnt" />
  131. <el-table-column label="状态" key="statusV">
  132. <template slot-scope="{ row, column }">
  133. <span v-if="getValue(row.status) == 1" style="color: blue;"> {{getDesc(row.status)}}</span>
  134. <span v-if="getValue(row.status) == 2" style="color: red;"> {{getDesc(row.status)}}</span>
  135. </template>
  136. </el-table-column>
  137. <el-table-column
  138. label="操作"
  139. align="center"
  140. width="200"
  141. class-name="small-padding fixed-width"
  142. >
  143. <template slot-scope="scope" v-if="scope.row.userId !== 1">
  144. <el-button
  145. size="mini"
  146. type="text"
  147. @click="handleDetail(scope.row)"
  148. v-hasPermi="['business:channel:query']"
  149. >查看</el-button>
  150. <el-button
  151. size="mini"
  152. type="text"
  153. @click="handleUpdate(scope.row)"
  154. v-hasPermi="['business:channel:edit']"
  155. >编辑</el-button>
  156. <el-switch
  157. style="margin-left: 9px;"
  158. v-model="scope.row.statusV"
  159. active-value="1"
  160. inactive-value="2"
  161. v-hasPermi="['business:channel:edit']"
  162. @change="handleStatusChange(scope.row)"
  163. ></el-switch>
  164. <!-- <el-button
  165. size="mini"
  166. type="text"
  167. disabled
  168. icon="el-icon-plus"
  169. @click="handleAdd(scope.row)"
  170. v-hasPermi="['admin:channel:add']"
  171. >添加子渠道</el-button> -->
  172. </template>
  173. </el-table-column>
  174. </el-table>
  175. <pagination
  176. v-show="total>0"
  177. :total="total"
  178. :page.sync="pageParams.pageNum"
  179. :limit.sync="pageParams.pageSize"
  180. @pagination="getList"
  181. />
  182. </el-col>
  183. </el-row>
  184. <!-- 新建 -->
  185. <channel-create
  186. v-if="createShow"
  187. :dialog-visible="createShow"
  188. :edit-id="editId"
  189. @saveSuccess="submitSuccess"
  190. @close="hideDialog"
  191. />
  192. <!-- 详情 -->
  193. <channel-detail
  194. v-if="detailShow"
  195. :dialog-visible="detailShow"
  196. :edit-id="editId"
  197. @close="hideDialog"
  198. />
  199. </div>
  200. </template>
  201. <script>
  202. import { getToken } from "@/utils/auth";
  203. import { listChannel, updateChannelStatus} from "@/api/admin/channel";
  204. import { listAreaByPid} from "@/api/admin/area";
  205. import ChannelCreate from './components/Create'
  206. import ChannelDetail from './components/Detail'
  207. export default {
  208. name: "ChannelIndex",
  209. components: {
  210. ChannelCreate,
  211. ChannelDetail
  212. },
  213. data() {
  214. return {
  215. // 遮罩层
  216. loading: true,
  217. // 导出遮罩层
  218. exportLoading: false,
  219. // 选中数组
  220. ids: [],
  221. // 创建编辑
  222. createShow: false,
  223. // 详情
  224. detailShow: false,
  225. provinceList:[],
  226. cityList:[],
  227. areaList:[],
  228. // 编辑项ID
  229. editId: null,
  230. parentId: null,
  231. // 显示搜索条件
  232. showSearch: true,
  233. // 总条数
  234. total: 0,
  235. // 用户表格数据
  236. channelList: [],
  237. channelOptions: [],
  238. channelName:"",
  239. title:"",
  240. // 状态数据字典
  241. statusOptions: [],
  242. // 表单参数
  243. form: {},
  244. defaultProps: {
  245. children: "children",
  246. label: "name"
  247. },
  248. // 查询参数
  249. queryParams: {
  250. name: "",
  251. mobile: "",
  252. provinceId:"",
  253. cityId:"",
  254. areaId:""
  255. },
  256. pageParams: {
  257. pageNum: 1,
  258. pageSize: 10
  259. }
  260. };
  261. },
  262. watch: {
  263. // 根据渠道名称筛选渠道树
  264. },
  265. mounted() {
  266. this.getProvinceList()
  267. },
  268. created() {
  269. let parentId = this.$route.query.parentId
  270. let title= this.$route.query.title
  271. this.title = title
  272. this.parentId = parentId
  273. console.log("parentId == "+parentId+ "title == "+title)
  274. // this.$route.meta.title = title + " - 子渠道管理"
  275. if(parentId){
  276. this.getList();
  277. }
  278. },
  279. methods: {
  280. /** 查询用户列表 */
  281. getList() {
  282. this.loading = true;
  283. this.queryParams.parentId = this.parentId
  284. listChannel('pageNum='+this.pageParams.pageNum + '&pageSize='+this.pageParams.pageSize+'&', this.queryParams).then(response => {
  285. this.channelList = response.rows;
  286. this.channelList.forEach(item => {
  287. item.statusV = JSON.parse(item.status).value+""
  288. })
  289. this.total = response.total;
  290. this.loading = false;
  291. }
  292. );
  293. },
  294. // 省
  295. getProvinceList(){
  296. this.cityList = []
  297. this.areaList = []
  298. this.queryParams.cityId = ""
  299. this.queryParams.areaId = ""
  300. listAreaByPid(0).then(response => {
  301. // console.log("getProvinceList"+JSON.stringify(response))
  302. this.provinceList = response || [];
  303. });
  304. },
  305. getCityList(){
  306. this.cityList = []
  307. this.areaList = []
  308. this.queryParams.cityId = ""
  309. this.queryParams.areaId = ""
  310. var provinceId = this.queryParams.provinceId
  311. listAreaByPid(provinceId).then(response => {
  312. // console.log("getCityList"+JSON.stringify(response))
  313. this.cityList = response || [];
  314. });
  315. },
  316. getAreaList(){
  317. var cityId = this.queryParams.cityId
  318. listAreaByPid(cityId).then(response => {
  319. // console.log("getAreaList"+JSON.stringify(response))
  320. this.areaList = response || [];
  321. });
  322. },
  323. // 状态修改
  324. handleStatusChange(row) {
  325. var newStatus = this.getValue(row.status) == 2?1:2
  326. let text = this.getValue(row.status) == 2 ? "启用" : "停用";
  327. this.$confirm('确认要"' + text + '""' + row.name + '"渠道吗?', "警告", {
  328. confirmButtonText: "确定",
  329. cancelButtonText: "取消",
  330. type: "warning"
  331. }).then(function() {
  332. var params={
  333. channelId:row.channelId,
  334. status: newStatus
  335. }
  336. return updateChannelStatus(params);
  337. }).then(() => {
  338. this.msgSuccess(text + "成功");
  339. this.getList();
  340. }).catch(function() {
  341. // row.status = row.status === "0" ? "1" : "0";
  342. });
  343. },
  344. /** 搜索按钮操作 */
  345. handleQuery() {
  346. this.queryParams.pageNum = 1;
  347. this.getList();
  348. },
  349. /** 重置按钮操作 */
  350. resetQuery() {
  351. this.queryParams= {
  352. pageNum: 1,
  353. pageSize: 10,
  354. name: "",
  355. mobile: "",
  356. provinceId:"",
  357. cityId:"",
  358. areaId:""
  359. },
  360. this.resetForm("queryForm");
  361. this.handleQuery();
  362. },
  363. handleDetail(row){
  364. this.detailShow = true
  365. this.editId = row.channelId
  366. },
  367. /** 新增按钮操作 */
  368. handleAdd() {
  369. this.createShow = true
  370. this.editId = null
  371. },
  372. /** 修改按钮操作 */
  373. handleUpdate(row) {
  374. this.createShow = true
  375. this.editId = row.channelId
  376. },
  377. // 保存后的操作
  378. submitSuccess(){
  379. this.getList();
  380. this.refreshChannelTree();
  381. },
  382. /**关闭弹窗*/
  383. hideDialog(){
  384. this.createShow = false
  385. this.detailShow = false
  386. },
  387. getDesc(val) {
  388. // console.log("val == "+val);
  389. const dataObj = JSON.parse(val);
  390. return (dataObj && dataObj.desc) || "";
  391. },
  392. getValue(val) {
  393. // console.log("val == "+val);
  394. const dataObj = JSON.parse(val);
  395. return (dataObj && dataObj.value) || "";
  396. },
  397. }
  398. };
  399. </script>
  400. <style lang="sass" scoped>
  401. </style>