index.vue 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索工作栏 -->
  4. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  5. <el-form-item label="商品编号" prop="code">
  6. <el-input v-model="queryParams.code" placeholder="请输入商品编号" clearable @keyup.enter.native="handleQuery" />
  7. </el-form-item>
  8. <el-form-item label="商品名称" prop="name">
  9. <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery" />
  10. </el-form-item>
  11. <el-form-item label="商品状态" prop="state">
  12. <el-select v-model="queryParams.state" placeholder="请选择商品状态" clearable @keyup.enter.native="handleQuery">
  13. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.GOODS_STATE)" :key="dict.value" :label="dict.label"
  14. :value="dict.value" />
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item>
  18. <el-popover placement="bottom" width="300" trigger="click">
  19. <el-form-item label="商品编号" prop="code">
  20. <el-input v-model="queryParams.code" placeholder="请输入商品编号" clearable @keyup.enter.native="handleQuery" />
  21. </el-form-item>
  22. <el-form-item label="商品名称" prop="name">
  23. <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery" />
  24. </el-form-item>
  25. <el-form-item label="商品类型" prop="category">
  26. <el-cascader v-model="queryParams.category" :options="categoryOptions" :show-all-levels="false"
  27. :props="{ label: 'name', value: 'id', children: 'children', checkStrictly: true }" />
  28. </el-form-item>
  29. <el-form-item label="商品品牌" prop="brand">
  30. <el-input v-model="queryParams.brand" placeholder="请输入商品品牌" clearable @keyup.enter.native="handleQuery" />
  31. </el-form-item>
  32. <el-form-item label="关键词" prop="keyword">
  33. <el-input v-model="queryParams.keyword" placeholder="请输入关键词" clearable @keyup.enter.native="handleQuery" />
  34. </el-form-item>
  35. <el-form-item label="商品状态" prop="state">
  36. <el-select v-model="queryParams.state" placeholder="请选择商品状态" clearable @keyup.enter.native="handleQuery">
  37. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.GOODS_STATE)" :key="dict.value" :label="dict.label"
  38. :value="dict.value" />
  39. </el-select>
  40. </el-form-item>
  41. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  42. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  43. <el-button slot="reference" style="margin-right: 10px;">复合查询</el-button>
  44. </el-popover>
  45. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  46. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  47. </el-form-item>
  48. </el-form>
  49. <!-- 操作工具栏 -->
  50. <el-row :gutter="10" class="mb8">
  51. <el-col :span="1.5">
  52. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  53. v-hasPermi="['supplier:goods-detail:create']">新增上架</el-button>
  54. </el-col>
  55. <!-- <el-col :span="1.5">
  56. <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
  57. :loading="exportLoading" v-hasPermi="['supplier:goods-detail:export']">导出</el-button>
  58. </el-col> -->
  59. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  60. </el-row>
  61. <el-row :gutter="10" class="mb8">
  62. </el-row>
  63. <!-- 列表 -->
  64. <el-row :gutter="10" class="mb8">
  65. <el-col :span="4">
  66. <span>商品分类</span>
  67. <el-tree :data="categoryOptions" :props="defaultProps" :expand-on-click-node="false"
  68. :filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNodeClick"
  69. style="overflow: auto;" />
  70. </el-col>
  71. <el-col :span="20">
  72. <el-tabs type="border-card" value="0" @tab-click="handleClick">
  73. <el-tab-pane label="全部" name="0">
  74. <el-table v-loading="loading" :data="list" :show-header="false">
  75. <el-table-column label="商品封面" align="center" prop="cover" width="250">
  76. <template v-slot="scope">
  77. <img :src="scope.row.cover" width="200px" />
  78. </template>
  79. </el-table-column>
  80. <el-table-column label="商品详情" align="center" width="680">
  81. <template v-slot="scope">
  82. <el-descriptions :title="`商品名称:` + scope.row.name">
  83. <el-descriptions-item label="商品编号">{{ scope.row.code }}</el-descriptions-item>
  84. <el-descriptions-item label="上架数量">{{ scope.row.upNum }}</el-descriptions-item>
  85. <el-descriptions-item label="市场价">{{ scope.row.marketPrice }}</el-descriptions-item>
  86. <el-descriptions-item label="计量单位">{{ scope.row.unit }}</el-descriptions-item>
  87. <el-descriptions-item label="库存数量">{{ scope.row.num }}</el-descriptions-item>
  88. <el-descriptions-item label="平台价">{{ scope.row.platPrice }}</el-descriptions-item>
  89. <el-descriptions-item label="商品品牌">{{ scope.row.brand }}</el-descriptions-item>
  90. <el-descriptions-item label="销售数量">{{ scope.row.saleNum }}</el-descriptions-item>
  91. <el-descriptions-item label="商品状态">
  92. <dict-tag :type="DICT_TYPE.GOODS_STATE" :value="scope.row.state" />
  93. </el-descriptions-item>
  94. <el-descriptions-item label="商品类型">
  95. <el-tag> {{ getCategoryName(scope.row.category) }}</el-tag>
  96. </el-descriptions-item>
  97. <el-descriptions-item label="搜索关键词">
  98. <el-tag v-for="item in scope.row.keyword"> {{ item }}</el-tag>
  99. </el-descriptions-item>
  100. </el-descriptions>
  101. </template>
  102. </el-table-column>
  103. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
  104. <template v-slot="scope">
  105. <el-button class="tableButton" size="small" type="success"
  106. @click="handleDetail(scope.row)">详情</el-button>
  107. <el-button class="tableButton" size="small" type="primary"
  108. @click="handleUpdate(scope.row)">修改</el-button>
  109. <el-button class="tableButton" size="small" type="warning" @click="handleOn(scope.row)">补货</el-button>
  110. <el-button class="tableButton" size="small" type="danger"
  111. @click="handleDown(scope.row)">下架</el-button>
  112. <el-button class="tableButton" size="small" type="info"
  113. @click="handleOnLog(scope.row)">补货记录</el-button>
  114. </template>
  115. </el-table-column>
  116. </el-table>
  117. <!-- 分页组件 -->
  118. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
  119. :limit.sync="queryParams.pageSize" @pagination="getList" />
  120. </el-tab-pane>
  121. <el-tab-pane label="在售中" name="1">
  122. <el-table v-loading="loading" :data="list" :show-header="false">
  123. <el-table-column label="商品封面" align="center" prop="cover" width="250">
  124. <template v-slot="scope">
  125. <img :src="scope.row.cover" width="200px" />
  126. </template>
  127. </el-table-column>
  128. <el-table-column label="商品详情" align="center" width="680">
  129. <template v-slot="scope">
  130. <el-descriptions :title="`商品名称:` + scope.row.name">
  131. <el-descriptions-item label="商品编号">{{ scope.row.code }}</el-descriptions-item>
  132. <el-descriptions-item label="上架数量">{{ scope.row.upNum }}</el-descriptions-item>
  133. <el-descriptions-item label="市场价">{{ scope.row.marketPrice }}</el-descriptions-item>
  134. <el-descriptions-item label="计量单位">{{ scope.row.unit }}</el-descriptions-item>
  135. <el-descriptions-item label="库存数量">{{ scope.row.num }}</el-descriptions-item>
  136. <el-descriptions-item label="平台价">{{ scope.row.platPrice }}</el-descriptions-item>
  137. <el-descriptions-item label="商品品牌">{{ scope.row.brand }}</el-descriptions-item>
  138. <el-descriptions-item label="销售数量">{{ scope.row.saleNum }}</el-descriptions-item>
  139. <el-descriptions-item label="商品状态">
  140. <dict-tag :type="DICT_TYPE.GOODS_STATE" :value="scope.row.state" />
  141. </el-descriptions-item>
  142. <el-descriptions-item label="商品类型">
  143. <el-tag> {{ getCategoryName(scope.row.category) }}</el-tag>
  144. </el-descriptions-item>
  145. <el-descriptions-item label="搜索关键词">
  146. <el-tag v-for="item in scope.row.keyword"> {{ item }}</el-tag>
  147. </el-descriptions-item>
  148. </el-descriptions>
  149. </template>
  150. </el-table-column>
  151. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
  152. <template v-slot="scope">
  153. <el-button class="tableButton" size="small" type="success"
  154. @click="handleDetail(scope.row)">详情</el-button>
  155. <el-button class="tableButton" size="small" type="primary"
  156. @click="handleUpdate(scope.row)">修改</el-button>
  157. <el-button class="tableButton" size="small" type="warning" @click="handleOn(scope.row)">补货</el-button>
  158. <el-button class="tableButton" size="small" type="danger"
  159. @click="handleDown(scope.row)">下架</el-button>
  160. <el-button class="tableButton" size="small" type="info"
  161. @click="handleOnLog(scope.row)">上架记录</el-button>
  162. </template>
  163. </el-table-column>
  164. </el-table>
  165. <!-- 分页组件 -->
  166. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
  167. :limit.sync="queryParams.pageSize" @pagination="getList" />
  168. </el-tab-pane>
  169. <el-tab-pane label="售罄" name="2">
  170. <el-table v-loading="loading" :data="list" :show-header="false">
  171. <el-table-column label="商品封面" align="center" prop="cover" width="250">
  172. <template v-slot="scope">
  173. <img :src="scope.row.cover" width="200px" />
  174. </template>
  175. </el-table-column>
  176. <el-table-column label="商品详情" align="center" width="680">
  177. <template v-slot="scope">
  178. <el-descriptions :title="`商品名称:` + scope.row.name">
  179. <el-descriptions-item label="商品编号">{{ scope.row.code }}</el-descriptions-item>
  180. <el-descriptions-item label="上架数量">{{ scope.row.upNum }}</el-descriptions-item>
  181. <el-descriptions-item label="市场价">{{ scope.row.marketPrice }}</el-descriptions-item>
  182. <el-descriptions-item label="计量单位">{{ scope.row.unit }}</el-descriptions-item>
  183. <el-descriptions-item label="库存数量">{{ scope.row.num }}</el-descriptions-item>
  184. <el-descriptions-item label="平台价">{{ scope.row.platPrice }}</el-descriptions-item>
  185. <el-descriptions-item label="商品品牌">{{ scope.row.brand }}</el-descriptions-item>
  186. <el-descriptions-item label="销售数量">{{ scope.row.saleNum }}</el-descriptions-item>
  187. <el-descriptions-item label="商品状态">
  188. <dict-tag :type="DICT_TYPE.GOODS_STATE" :value="scope.row.state" />
  189. </el-descriptions-item>
  190. <el-descriptions-item label="商品类型">
  191. <el-tag> {{ getCategoryName(scope.row.category) }}</el-tag>
  192. </el-descriptions-item>
  193. <el-descriptions-item label="搜索关键词">
  194. <el-tag v-for="item in scope.row.keyword"> {{ item }}</el-tag>
  195. </el-descriptions-item>
  196. </el-descriptions>
  197. </template>
  198. </el-table-column>
  199. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
  200. <template v-slot="scope">
  201. <el-button class="tableButton" size="small" type="success"
  202. @click="handleDetail(scope.row)">详情</el-button>
  203. <el-button class="tableButton" size="small" type="primary"
  204. @click="handleUpdate(scope.row)">修改</el-button>
  205. <el-button class="tableButton" size="small" type="warning" @click="handleOn(scope.row)">补货</el-button>
  206. <el-button class="tableButton" size="small" type="danger"
  207. @click="handleDown(scope.row)">下架</el-button>
  208. <el-button class="tableButton" size="small" type="info"
  209. @click="handleOnLog(scope.row)">上架记录</el-button>
  210. </template>
  211. </el-table-column>
  212. </el-table>
  213. <!-- 分页组件 -->
  214. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
  215. :limit.sync="queryParams.pageSize" @pagination="getList" />
  216. </el-tab-pane>
  217. <el-tab-pane label="已下架" name="3">
  218. <el-table v-loading="loading" :data="list" :show-header="false">
  219. <el-table-column label="商品封面" align="center" prop="cover" width="250">
  220. <template v-slot="scope">
  221. <img :src="scope.row.cover" width="200px" />
  222. </template>
  223. </el-table-column>
  224. <el-table-column label="商品详情" align="center" width="680">
  225. <template v-slot="scope">
  226. <el-descriptions :title="`商品名称:` + scope.row.name">
  227. <el-descriptions-item label="商品编号">{{ scope.row.code }}</el-descriptions-item>
  228. <el-descriptions-item label="上架数量">{{ scope.row.upNum }}</el-descriptions-item>
  229. <el-descriptions-item label="市场价">{{ scope.row.marketPrice }}</el-descriptions-item>
  230. <el-descriptions-item label="计量单位">{{ scope.row.unit }}</el-descriptions-item>
  231. <el-descriptions-item label="库存数量">{{ scope.row.num }}</el-descriptions-item>
  232. <el-descriptions-item label="平台价">{{ scope.row.platPrice }}</el-descriptions-item>
  233. <el-descriptions-item label="商品品牌">{{ scope.row.brand }}</el-descriptions-item>
  234. <el-descriptions-item label="销售数量">{{ scope.row.saleNum }}</el-descriptions-item>
  235. <el-descriptions-item label="商品状态">
  236. <dict-tag :type="DICT_TYPE.GOODS_STATE" :value="scope.row.state" />
  237. </el-descriptions-item>
  238. <el-descriptions-item label="商品类型">
  239. <el-tag> {{ getCategoryName(scope.row.category) }}</el-tag>
  240. </el-descriptions-item>
  241. <el-descriptions-item label="搜索关键词">
  242. <el-tag v-for="item in scope.row.keyword"> {{ item }}</el-tag>
  243. </el-descriptions-item>
  244. </el-descriptions>
  245. </template>
  246. </el-table-column>
  247. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
  248. <template v-slot="scope">
  249. <el-button class="tableButton" size="small" type="success"
  250. @click="handleDetail(scope.row)">详情</el-button>
  251. <el-button class="tableButton" size="small" type="primary"
  252. @click="handleUpdate(scope.row)">修改</el-button>
  253. <el-button class="tableButton" size="small" type="warning" @click="handleOn(scope.row)">补货</el-button>
  254. <el-button class="tableButton" size="small" type="danger"
  255. @click="handleDown(scope.row)">下架</el-button>
  256. <el-button class="tableButton" size="small" type="info"
  257. @click="handleOnLog(scope.row)">上架记录</el-button>
  258. </template>
  259. </el-table-column>
  260. </el-table>
  261. <!-- 分页组件 -->
  262. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
  263. :limit.sync="queryParams.pageSize" @pagination="getList" />
  264. </el-tab-pane>
  265. </el-tabs>
  266. </el-col>
  267. </el-row>
  268. <!-- 对话框(添加 / 修改) -->
  269. <el-dialog :title="title" :visible.sync="open" width="800px" v-dialogDrag append-to-body>
  270. <el-form ref="form" :model="form" :rules="rules" label-width="93px">
  271. <el-row>
  272. <el-col :span="12">
  273. <el-form-item label="商品编号" prop="code">
  274. <el-input v-model="form.code" disabled />
  275. </el-form-item>
  276. </el-col>
  277. <el-col :span="12">
  278. <el-form-item label="商品名称" prop="name">
  279. <el-input v-model="form.name" disabled />
  280. </el-form-item>
  281. </el-col>
  282. <el-col :span="12">
  283. <el-form-item label="付款方式" prop="payMethod">
  284. <el-select v-model="form.payMethod" placeholder="请选择付款方式" multiple>
  285. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PAY_METHOD)" :key="dict.value" :label="dict.label"
  286. :value="dict.value" />
  287. </el-select>
  288. </el-form-item>
  289. </el-col>
  290. <el-col :span="12">
  291. <el-form-item label="售后策略" prop="aftersaleStrategy">
  292. <el-select v-model="form.aftersaleStrategy" placeholder="请选择售后策略" clearable>
  293. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.AFTERSALE_STRATEGY)" :key="parseInt(dict.value)"
  294. :label="dict.label" :value="parseInt(dict.value)" />
  295. </el-select>
  296. </el-form-item>
  297. </el-col>
  298. <el-col :span="12">
  299. <el-form-item label="价格策略" prop="priceStrategy">
  300. <el-select v-model="form.priceStrategy" placeholder="请选择价格策略" clearable>
  301. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PRICE_STRATEGY)" :key="dict.value"
  302. :label="dict.label" :value="dict.value" />
  303. </el-select>
  304. </el-form-item>
  305. </el-col>
  306. <el-col :span="12">
  307. <el-form-item label="是否置顶" prop="sticky">
  308. <el-select v-model="form.sticky" placeholder="请选择是否置顶" clearable>
  309. <el-option v-for="dict in [{ label: '否', value: 0 }, { label: '是', value: 1 }]" :key="dict.value"
  310. :label="dict.label" :value="dict.value" />
  311. </el-select>
  312. </el-form-item>
  313. </el-col>
  314. <!-- 阶梯价格策略 -->
  315. <el-col :span="24" v-if="form.priceStrategy == 2" style="margin-bottom: 20px;">
  316. <el-table :data="priceStrategyTableData" style="width: 100%">
  317. <el-table-column prop="level" align="center" label="阶梯" />
  318. <el-table-column prop="condition" align="center" label="数量条件" />
  319. <el-table-column prop="unit" align="center" label="单位" />
  320. <el-table-column prop="category" align="center" label="策略类型" />
  321. <el-table-column prop="price" align="center" label="价格/RMB(元)" />
  322. </el-table>
  323. </el-col>
  324. <el-col :span="24">
  325. <el-form-item label="自定义策略" prop="customStrategy">
  326. <el-input type="textarea" v-model="form.customStrategy" placeholder="请输入自定义策略" />
  327. </el-form-item>
  328. </el-col>
  329. <el-col :span="12">
  330. <el-form-item label="上架价格" prop="marketPrice">
  331. <el-input-number v-model="form.marketPrice" :precision="2" :step="100" />
  332. </el-form-item>
  333. </el-col>
  334. <el-col :span="12">
  335. <el-form-item label="单位" prop="unit">
  336. <el-input v-model="form.unit" placeholder="请输入单位" />
  337. </el-form-item>
  338. </el-col>
  339. <el-col :span="12">
  340. <el-form-item label="平台价" prop="platPrice">
  341. <el-input-number v-model="form.platPrice" :precision="2" :step="100" />
  342. </el-form-item>
  343. </el-col>
  344. <el-col :span="12">
  345. <el-form-item label="上架方式" prop="upMethod">
  346. <el-select v-model="form.upMethod" placeholder="请选择上架方式" clearable>
  347. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.ON_SOURCE)" :key="parseInt(dict.value)"
  348. :label="dict.label" :value="parseInt(dict.value)" />
  349. </el-select>
  350. </el-form-item>
  351. </el-col>
  352. <el-col :span="12">
  353. <el-form-item label="上架数量" prop="upNum">
  354. <el-input-number :precision="0" :min="0" v-model="form.upNum" placeholder="请输入数量" />
  355. </el-form-item>
  356. </el-col>
  357. <el-col :span="12">
  358. <el-form-item label="立即上架" prop="upNow">
  359. <el-select v-model="form.upNow" placeholder="请选择是否立即上架" clearable>
  360. <el-option v-for="dict in [{ label: '否', value: 0 }, { label: '是', value: 1 }]" :key="dict.value"
  361. :label="dict.label" :value="dict.value" />
  362. </el-select>
  363. </el-form-item>
  364. </el-col>
  365. <el-col :span="12">
  366. <el-form-item label="上架时间" prop="upTime" v-if="form.upNow == 0">
  367. <el-date-picker v-model="form.upTime" type="datetime" placeholder="选择上架时间">
  368. </el-date-picker>
  369. </el-form-item>
  370. </el-col>
  371. <el-col :span="12">
  372. <el-form-item label="发货地址" prop="unit" v-if="form.upNow == 0">
  373. <el-input v-model="form.unit" placeholder="请输入单位" />
  374. </el-form-item>
  375. </el-col>
  376. <el-col :span="12">
  377. <el-form-item label="退货地址" prop="unit" v-if="form.upNow == 0">
  378. <el-input v-model="form.unit" placeholder="请输入单位" />
  379. </el-form-item>
  380. </el-col>
  381. <el-col :span="12">
  382. <el-form-item label="退货联系人" prop="unit" v-if="form.upNow == 0">
  383. <el-input v-model="form.unit" placeholder="请输入单位" />
  384. </el-form-item>
  385. </el-col>
  386. <el-col :span="24">
  387. <el-form-item label="商品详情" prop="productDetail">
  388. <editor v-model="form.productDetail" :min-height="192" />
  389. </el-form-item>
  390. </el-col>
  391. <el-col :span="24">
  392. <el-form-item label="商品封面" prop="cover">
  393. <imageUpload v-model="form.cover" :limit='1' />
  394. </el-form-item>
  395. </el-col>
  396. <el-col :span="24">
  397. <el-form-item label="商品图片" prop="cover">
  398. <img v-for="item in form.picture" :src="item" class="avatar" width="200" />
  399. </el-form-item>
  400. </el-col>
  401. </el-row>
  402. </el-form>
  403. <div slot="footer" class="dialog-footer">
  404. <el-button type="primary" @click="submitForm" :disabled="buttonDisable">确 定</el-button>
  405. <el-button @click="cancel" :disabled="buttonDisable">取 消</el-button>
  406. </div>
  407. </el-dialog>
  408. <!-- 对话框(补货) -->
  409. <el-dialog title="商品补货" :visible.sync="openAdd" width="600px" v-dialogDrag append-to-body>
  410. <el-form ref="formAdd" :model="formAdd" :rules="rulesAdd" label-width="93px">
  411. <el-form-item label="商品编号" prop="code">
  412. <el-input v-model="formAdd.code" disabled />
  413. </el-form-item>
  414. <el-form-item label="商品名称" prop="name">
  415. <el-input v-model="formAdd.name" disabled />
  416. </el-form-item>
  417. <el-form-item label="补货数量" prop="upNum">
  418. <el-input-number :precision="0" :min="0" v-model="formAdd.upNum" placeholder="请输入数量" />
  419. </el-form-item>
  420. </el-form>
  421. <div slot="footer" class="dialog-footer">
  422. <el-button type="primary" @click="submitFormAdd" :disabled="buttonDisable">确 定</el-button>
  423. <el-button @click="cancelAdd" :disabled="buttonDisable">取 消</el-button>
  424. </div>
  425. </el-dialog>
  426. <!-- 对话框(补货记录) -->
  427. <el-dialog title="补货记录" :visible.sync="openAddLog" width="700px" v-dialogDrag append-to-body>
  428. <el-table v-loading="loadingAddLog" :data="listAddLog">
  429. <el-table-column label="商品编号" align="center" prop="goodsCode" />
  430. <el-table-column label="商品名称" align="center" prop="goodsName" />
  431. <el-table-column label="补货数量" align="center" prop="upNum" />
  432. <el-table-column label="补货时间" align="center" prop="createTime">
  433. <template v-slot="scope">
  434. {{ parseTime(scope.row.updateTime) }}
  435. </template>
  436. </el-table-column>
  437. </el-table>
  438. </el-dialog>
  439. </div>
  440. </template>
  441. <script>
  442. import {
  443. createGoodsDetail,
  444. updateGoodsDetail,
  445. deleteGoodsDetail,
  446. getGoodsDetail,
  447. getGoodsDetailPage,
  448. exportGoodsDetailExcel,
  449. addGoodsDetailUpNum,
  450. changeGoodsDetailStatus,
  451. getAddAgainLog,
  452. } from "@/api/supplier/goodsDetail";
  453. import { getGoodsCategoryListAll, } from "@/api/supplier/goodsCategory";
  454. import Treeselect from '@riophae/vue-treeselect'
  455. import Editor from '@/components/Editor';
  456. import ImageUpload from "@/components/ImageUpload/index";
  457. export default {
  458. name: "GoodsDetail",
  459. components: {
  460. Editor,
  461. ImageUpload,
  462. Treeselect,
  463. },
  464. data() {
  465. return {
  466. buttonDisable: false,
  467. categoryOptions: [],
  468. categoryList: [],
  469. listAddLog: [],
  470. defaultProps: {
  471. children: 'children',
  472. label: 'name'
  473. },
  474. // 遮罩层
  475. loading: true,
  476. loadingAddLog: false,
  477. // 导出遮罩层
  478. exportLoading: false,
  479. // 显示搜索条件
  480. showSearch: true,
  481. // 总条数
  482. total: 0,
  483. // 商品详情列表
  484. list: [],
  485. // 弹出层标题
  486. title: "",
  487. // 是否显示弹出层
  488. open: false,
  489. openAdd: false,
  490. openAddLog: false,
  491. // 查询参数
  492. queryParams: {
  493. pageNo: 1,
  494. pageSize: 10,
  495. goodsId: null,
  496. code: null,
  497. name: null,
  498. keyword: null,
  499. brand: null,
  500. state: null,
  501. category: null,
  502. upTime: [],
  503. },
  504. // 表单参数
  505. form: {},
  506. formAdd: {},
  507. // 表单校验
  508. rules: {
  509. },
  510. rulesAdd: {
  511. upNum: [{ required: true, message: "补货数量不能为空", trigger: "blur" }],
  512. },
  513. priceStrategyTableData: [
  514. { level: '1', condition: '0 ≤ 数量 ≤ 1', unit: '个', category: '固定价格', price: '¥100' },
  515. { level: '2', condition: '2 ≤ 数量', unit: '个', category: '折扣/固定价格', price: '80%/¥90' },
  516. ]
  517. };
  518. },
  519. created() {
  520. this.getList();
  521. getGoodsCategoryListAll().then(response => {
  522. this.categoryList = response.data;
  523. this.categoryOptions = this.handleTree(response.data, "id");
  524. });
  525. },
  526. methods: {
  527. /** 商品补货 */
  528. submitFormAdd() {
  529. this.buttonDisable = true;
  530. this.$refs["formAdd"].validate(valid => {
  531. if (!valid) {
  532. return;
  533. }
  534. // 修改的提交
  535. if (this.formAdd.id != null) {
  536. addGoodsDetailUpNum(this.formAdd).then(response => {
  537. this.$modal.msgSuccess("补货成功");
  538. this.openAdd = false;
  539. this.buttonDisable = false;
  540. this.getList();
  541. });
  542. return;
  543. }
  544. })
  545. },
  546. /** 取消补货 */
  547. cancelAdd() {
  548. this.openAdd = false;
  549. this.buttonDisable = false;
  550. this.resetAdd();
  551. },
  552. /** tab查询 */
  553. handleClick(tab, event) {
  554. if (tab.name == '0') {//全部
  555. this.queryParams.state = null;
  556. }
  557. if (tab.name == '1') {//在售中
  558. this.queryParams.state = 1;
  559. }
  560. if (tab.name == '2') {//售罄
  561. this.queryParams.state = 2;
  562. }
  563. if (tab.name == '3') {//已下架
  564. this.queryParams.state = 3;
  565. }
  566. this.getList();
  567. },
  568. // 筛选节点
  569. filterNode(value, data) {
  570. if (!value) return true
  571. return data.label.indexOf(value) !== -1
  572. },
  573. handleNodeClick(data) {
  574. this.reset();
  575. this.queryParams.category = data.id
  576. this.getList()
  577. },
  578. //获得商品类型名称
  579. getCategoryName(category) {
  580. for (const item of this.categoryList) {
  581. if (item.id === category) {
  582. return item.name;
  583. }
  584. }
  585. return "未知类型";
  586. },
  587. /** 查询列表 */
  588. getList() {
  589. this.loading = true;
  590. // 执行查询
  591. getGoodsDetailPage(this.queryParams).then(response => {
  592. this.list = response.data.list;
  593. for (let i = 0; i < this.list.length; i++) {
  594. if (this.list[i].keyword) {
  595. this.list[i].keyword = this.list[i].keyword.split(",");
  596. }
  597. }
  598. this.total = response.data.total;
  599. this.loading = false;
  600. });
  601. },
  602. /** 取消按钮 */
  603. cancel() {
  604. this.open = false;
  605. this.buttonDisable = false;
  606. this.reset();
  607. },
  608. /** 表单重置 */
  609. reset() {
  610. this.form = {
  611. id: undefined,
  612. goodsId: undefined,
  613. code: undefined,
  614. name: undefined,
  615. keyword: undefined,
  616. unit: undefined,
  617. marketPrice: undefined,
  618. platPrice: undefined,
  619. brand: undefined,
  620. num: undefined,
  621. state: undefined,
  622. category: undefined,
  623. saleNum: undefined,
  624. payMethod: undefined,
  625. aftersaleStrategy: undefined,
  626. priceStrategy: undefined,
  627. upMethod: undefined,
  628. upNum: undefined,
  629. upTime: undefined,
  630. sticky: undefined,
  631. productDetail: undefined,
  632. cover: undefined,
  633. onTitle: undefined,
  634. upNow: undefined,
  635. customStrategy: undefined,
  636. };
  637. this.resetForm("form");
  638. },
  639. resetAdd() {
  640. this.formAdd = {
  641. code: undefined,
  642. name: undefined,
  643. upNum: undefined,
  644. }
  645. this.resetForm("formAdd");
  646. },
  647. /** 搜索按钮操作 */
  648. handleQuery() {
  649. this.queryParams.pageNo = 1;
  650. this.getList();
  651. },
  652. /** 重置按钮操作 */
  653. resetQuery() {
  654. this.resetForm("queryForm");
  655. this.handleQuery();
  656. },
  657. /** 新增按钮操作 */
  658. handleAdd() {
  659. this.reset();
  660. this.open = true;
  661. this.title = "添加上架记录";
  662. },
  663. /** 详情 */
  664. handleDetail(row) {
  665. this.$router.push({
  666. path: "/supplier/goodsDetail/detail",
  667. query: { id: row.id },
  668. });
  669. },
  670. /** 修改按钮操作 */
  671. handleUpdate(row) {
  672. this.reset();
  673. this.buttonDisable = false;
  674. const id = row.id;
  675. getGoodsDetail(id).then(response => {
  676. this.form = response.data;
  677. if (this.form.payMethod) {
  678. this.form.payMethod = this.form.payMethod.split(",");
  679. }
  680. if (this.form.picture) {
  681. this.form.picture = this.form.picture.split(",");
  682. }
  683. this.open = true;
  684. this.title = "修改上架记录";
  685. });
  686. },
  687. /** 补货 */
  688. handleOn(row) {
  689. this.resetAdd();
  690. this.formAdd.id = row.id;
  691. this.formAdd.code = row.code;
  692. this.formAdd.name = row.name;
  693. this.openAdd = true;
  694. },
  695. /** 下架 */
  696. handleDown(row) {
  697. this.$modal.confirm('是否确认下架商品名称为"' + row.name + '",编号为"' + row.code + '"的商品吗?').then(function () {
  698. return changeGoodsDetailStatus(row.id, 3);
  699. }).then(() => {
  700. this.getList();
  701. this.$modal.msgSuccess("下架成功");
  702. }).catch(() => { });
  703. },
  704. /** 补货记录 */
  705. handleOnLog(row) {
  706. const id = row.id;
  707. this.loadingAddLog = true;
  708. getAddAgainLog(id).then(res => {
  709. this.listAddLog = res.data;
  710. this.openAddLog = true;
  711. this.loadingAddLog = false;
  712. })
  713. },
  714. /** 提交按钮 */
  715. submitForm() {
  716. this.$refs["form"].validate(valid => {
  717. this.buttonDisable = true;
  718. if (!valid) {
  719. this.buttonDisable = false;
  720. return;
  721. }
  722. if (this.form.payMethod != null) {
  723. let temp = "";
  724. for (let i = 0; i < this.form.payMethod.length; i++) {
  725. if (!temp) {
  726. temp = this.form.payMethod[i];
  727. } else {
  728. temp = temp + "," + this.form.payMethod[i];
  729. }
  730. }
  731. this.form.payMethod = temp;
  732. }
  733. if (this.form.picture != null) {
  734. let temp = "";
  735. for (let i = 0; i < this.form.picture.length; i++) {
  736. if (!temp) {
  737. temp = this.form.picture[i];
  738. } else {
  739. temp = temp + "," + this.form.picture[i];
  740. }
  741. }
  742. this.form.picture = temp;
  743. }
  744. // 修改的提交
  745. if (this.form.id != null) {
  746. updateGoodsDetail(this.form).then(response => {
  747. this.$modal.msgSuccess("修改成功");
  748. this.open = false;
  749. this.buttonDisable = false;
  750. this.getList();
  751. });
  752. return;
  753. }
  754. // 添加的提交
  755. createGoodsDetail(this.form).then(response => {
  756. this.$modal.msgSuccess("新增成功");
  757. this.open = false;
  758. this.buttonDisable = false;
  759. this.getList();
  760. });
  761. });
  762. },
  763. /** 删除按钮操作 */
  764. handleDelete(row) {
  765. const id = row.id;
  766. this.$modal.confirm('是否确认删除上架记录编号为"' + id + '"的数据项?').then(function () {
  767. return deleteGoodsDetail(id);
  768. }).then(() => {
  769. this.getList();
  770. this.$modal.msgSuccess("删除成功");
  771. }).catch(() => { });
  772. },
  773. /** 导出按钮操作 */
  774. handleExport() {
  775. // 处理查询参数
  776. let params = { ...this.queryParams };
  777. params.pageNo = undefined;
  778. params.pageSize = undefined;
  779. this.$modal.confirm('是否确认导出所有上架记录数据项?').then(() => {
  780. this.exportLoading = true;
  781. return exportGoodsDetailExcel(params);
  782. }).then(response => {
  783. this.$download.excel(response, '上架记录.xls');
  784. this.exportLoading = false;
  785. }).catch(() => { });
  786. }
  787. }
  788. };
  789. </script>
  790. <style scoped>
  791. .tableButton {
  792. margin-top: 5px;
  793. margin-left: 10px;
  794. width: 88%;
  795. }
  796. </style>