You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

414 lines
13 KiB

  1. <template>
  2. <div>
  3. <div style="margin-top: 5px">
  4. <el-button type="primary" @click="clickSave">{{ attributeDialog?'编辑':'保存' }}</el-button>
  5. <el-button type="primary" @click="refreshPropertiesModal" :disabled="disabled" v-if="attributeDialog">刷新属性模板</el-button>
  6. </div>
  7. <div class="rq " v-if="attributeDialog">
  8. <el-table
  9. :height="height"
  10. :data="dataList"
  11. border
  12. style="width: 100%;margin-top: 5px">
  13. <el-table-column
  14. v-for="(item,index) in productColumnList" :key="index"
  15. :sortable="item.columnSortable"
  16. :prop="item.columnProp"
  17. :header-align="item.headerAlign"
  18. :show-overflow-tooltip="item.showOverflowTooltip"
  19. :align="item.align"
  20. :fixed="item.fixed===''?false:item.fixed"
  21. :min-width="item.columnWidth"
  22. :label="item.columnLabel">
  23. <template slot-scope="scope">
  24. <div v-if="item.columnProp !== 'textValue' && item.columnProp !== 'numValue'">
  25. <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
  26. <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
  27. </div>
  28. <div v-else>
  29. {{scope.row.valueTypeDb==='T'?scope.row.textValue:scope.row.numValue}}
  30. </div>
  31. </template>
  32. </el-table-column>
  33. </el-table>
  34. </div>
  35. <div class="rq " v-else>
  36. <el-table
  37. :height="height"
  38. :data="copyAttributeList"
  39. border
  40. style="width: 100%;margin-top: 5px">
  41. <el-table-column
  42. v-for="(item,index) in productColumnList" :key="index"
  43. :sortable="item.columnSortable"
  44. :prop="item.columnProp"
  45. :header-align="item.headerAlign"
  46. :show-overflow-tooltip="item.showOverflowTooltip"
  47. :align="item.align"
  48. :fixed="item.fixed===''?false:item.fixed"
  49. :min-width="item.columnWidth"
  50. :label="item.columnLabel">
  51. <template slot-scope="scope">
  52. <div v-if="item.columnProp !== 'textValue' && item.columnProp !== 'numValue'">
  53. <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
  54. <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
  55. </div>
  56. <div v-else>
  57. <div v-if="scope.row.valueChooseFlag !== 'Y'">
  58. <el-input-number v-model="scope.row.numValue" style="padding: 0;width: 100%" v-if="scope.row.valueType === '数字'" :controls="false"
  59. ></el-input-number>
  60. <el-input v-model="scope.row.textValue" v-else></el-input>
  61. </div>
  62. <div v-else>
  63. <el-select style="width: 100%;" v-if="scope.row.valueType === '文本'" v-model="scope.row.textValue">
  64. <el-option :value="i.availableValue" :label="i.availableValue" v-for="(i,key) in scope.row.availableValueList" :key="key"></el-option>
  65. </el-select>
  66. <el-select style="width: 100%;" v-else v-model="scope.row.numValue">
  67. <el-option :value="i.availableValue" :label="i.availableValue" v-for="(i,key) in scope.row.availableValueList" :key="key"></el-option>
  68. </el-select>
  69. </div>
  70. </div>
  71. </template>
  72. </el-table-column>
  73. </el-table>
  74. </div>
  75. <el-dialog title="属性项目" v-drag :visible.sync="attributeSaveDialog" append-to-body>
  76. <transfer-table v-if="attributeSaveDialog"
  77. v-model="dataList2"
  78. :data-list="searchDataList"> </transfer-table>
  79. <el-footer style="height:40px;margin-top: 20px;text-align:center">
  80. <el-button type="primary" @click="attributeSaveDialog = false">关闭</el-button>
  81. </el-footer>
  82. </el-dialog>
  83. </div>
  84. </template>
  85. <script>
  86. import {
  87. refreshPropertiesModal,
  88. updatePropertiesList,
  89. getPropertiesListByPartAndCodeNo,
  90. searchPropertiesItemList,
  91. saveSubPropertiesValueForAlone,
  92. deleteSubPropertiesValueForAlone
  93. } from "@/api/part/partProperties.js";
  94. import TransferTable from "@/views/modules/common/transferTable.vue";
  95. export default {
  96. name: "orderAttribute",
  97. components: {TransferTable},
  98. props:{
  99. site:{
  100. type:String,
  101. },
  102. partNo:{
  103. type:String,
  104. },
  105. codeNo:{
  106. type:String,
  107. },
  108. functionType:{
  109. type:String,
  110. },
  111. disabled:{
  112. type:Boolean,
  113. default:false,
  114. }
  115. },
  116. data(){
  117. return{
  118. height:320,
  119. loading:false,
  120. attributeDialog:true,
  121. copyAttributeList:[],
  122. attributeSaveDialog:false,
  123. productColumnList: [
  124. {
  125. userId: this.$store.state.user.name,
  126. functionId: 100002001,
  127. serialNumber: '100002001TablePropertiesItemNo',
  128. tableId: "100002001Table",
  129. tableName: "属性表",
  130. columnProp: 'propertiesItemNo',
  131. headerAlign: "center",
  132. align: "left",
  133. columnLabel: '属性编码',
  134. columnHidden: false,
  135. columnImage: false,
  136. columnSortable: false,
  137. sortLv: 0,
  138. status: true,
  139. fixed: '',
  140. },{
  141. userId: this.$store.state.user.name,
  142. functionId: 100002001,
  143. serialNumber: '100002001TableItemDesc',
  144. tableId: "100002001Table",
  145. tableName: "属性表",
  146. columnProp: 'itemDesc',
  147. headerAlign: "center",
  148. align: "left",
  149. columnLabel: '属性名称',
  150. columnHidden: false,
  151. columnImage: false,
  152. columnSortable: false,
  153. sortLv: 0,
  154. status: true,
  155. fixed: '',
  156. },
  157. {
  158. userId: this.$store.state.user.name,
  159. functionId: 100002001,
  160. serialNumber: '100002001TableValueType',
  161. tableId: "100002001Table",
  162. tableName: "属性表",
  163. columnProp: 'valueType',
  164. headerAlign: "center",
  165. align: "center",
  166. columnLabel: '值类型',
  167. columnHidden: false,
  168. columnImage: false,
  169. columnSortable: false,
  170. sortLv: 0,
  171. status: true,
  172. fixed: '',
  173. columnWidth:80,
  174. },
  175. {
  176. userId: this.$store.state.user.name,
  177. functionId: 100002001,
  178. serialNumber: '100002001TableMaxValue',
  179. tableId: "100002001Table",
  180. tableName: "属性表",
  181. columnProp: 'textValue',
  182. headerAlign: "center",
  183. align: "left",
  184. columnLabel: '属性值',
  185. columnHidden: false,
  186. columnImage: false,
  187. columnSortable: false,
  188. sortLv: 0,
  189. status: true,
  190. fixed: '',
  191. columnWidth:120,
  192. },
  193. ],
  194. searchDataList:[],
  195. dataList:[],
  196. dataList2:[],
  197. }
  198. },
  199. watch:{
  200. partNo(newValue,oldValue){
  201. if (newValue){
  202. this.getProperties();
  203. }
  204. },
  205. },
  206. methods:{
  207. //初始化组件的参数
  208. init(inData) {
  209. //初始化参数
  210. this.searchData = JSON.parse(JSON.stringify(inData));
  211. //刷新表格
  212. this.getProperties();
  213. },
  214. refreshPropertiesModal(){
  215. this.$confirm(`是否刷新至最新模板界面,已填数据会更新到新模板中,若旧属性在新模板中被删除,该条数据会消失。`, '提示', {
  216. confirmButtonText: '确定',
  217. cancelButtonText: '取消',
  218. type: 'warning'
  219. }).then(() => {
  220. let params = {
  221. site: this.searchData.site,
  222. partNo: this.searchData.partNo,
  223. codeNo: this.searchData.codeNo,
  224. recordType: this.searchData.functionType,
  225. }
  226. refreshPropertiesModal(params).then(({data}) => {
  227. if (data && data.code === 0) {
  228. this.$message.success(data.msg);
  229. this.getProperties();
  230. this.attributeDialog = true;
  231. } else {
  232. this.$message.warning(data.msg);
  233. }
  234. this.loading = false
  235. }).catch((error) => {
  236. this.$message.error(error)
  237. this.loading = false
  238. })
  239. })
  240. },
  241. getProperties(){
  242. let params = {
  243. site: this.searchData.site,
  244. partNo: this.searchData.partNo,
  245. codeNo: this.searchData.codeNo,
  246. recordType: this.searchData.functionType,
  247. }
  248. console.log("当前参数:",params)
  249. getPropertiesListByPartAndCodeNo(params).then(({data})=>{
  250. if (data && data.code === 0){
  251. this.dataList = data.rows;
  252. this.dataList2 = JSON.parse(JSON.stringify(data.rows));
  253. for (let i = 0; i <this.dataList2.length ; i++) {
  254. this.dataList2[i].itemNo= this.dataList2[i].propertiesItemNo
  255. }
  256. this.searchAttributeList({})
  257. }else {
  258. this.$message.warning(data.msg)
  259. }
  260. }).catch((error)=>{
  261. this.$message.error(error)
  262. })
  263. },
  264. clickSave(){
  265. console.log("点击保存/编辑按钮,当前模式:", this.attributeDialog)
  266. console.log("数据条数:", this.dataList.length)
  267. console.log(0)
  268. if(this.dataList.length===0) {
  269. console.log("属性数据为空!")
  270. return false
  271. }
  272. if(this.dataList.length===0){
  273. return false
  274. }
  275. if (!this.attributeDialog){
  276. this.updateTestPropertiesList();
  277. }else {
  278. //针对null 处理
  279. for (let i = 0; i < this.dataList.length; i++){
  280. if (this.dataList[i].numValue == null){
  281. this.dataList[i].numValue = undefined;
  282. }
  283. }
  284. this.copyAttributeList = JSON.parse(JSON.stringify(this.dataList))
  285. this.attributeDialog = false;
  286. }
  287. },
  288. updateTestPropertiesList(){
  289. this.loading = true
  290. updatePropertiesList(this.copyAttributeList).then(({data})=>{
  291. if (data && data.code === 0){
  292. this.$message.success(data.msg);
  293. this.getProperties();
  294. this.attributeDialog = true;
  295. }else {
  296. this.$message.warning(data.msg);
  297. }
  298. this.loading = false
  299. }).catch((error)=>{
  300. this.$message.error(error)
  301. this.loading = false
  302. })
  303. },
  304. clickSaveBtn(){
  305. if (!this.attributeDialog) {
  306. this.$message.warning('请保存更改!')
  307. return
  308. }
  309. //查询 属性模板
  310. this.searchAttributeList({})
  311. this.attributeSaveDialog = true;
  312. },
  313. saveTestPropertiesItem(params){
  314. let i = 0;
  315. let arr = params.searchTableList.map(item=>{
  316. item.partNo = this.searchData.partNo;
  317. item.site = this.searchData.site;
  318. item.codeNo = this.searchData.codeNo;
  319. item.recordType = this.searchData.functionType;
  320. return item
  321. })
  322. for (let j = 0; j <arr.length ; j++) {
  323. arr[j].propertiesItemNo= arr[j].itemNo
  324. arr[j].itemNo=999
  325. }
  326. saveSubPropertiesValueForAlone(arr).then(({data})=>{
  327. if (data && data.code === 0){
  328. this.$message.success(data.msg);
  329. this.getProperties(params)
  330. }else {
  331. this.$message.warning(data.msg);
  332. }
  333. }).catch((error)=>{
  334. this.$message.error(error)
  335. })
  336. },
  337. removeTestPropertiesItem(params){
  338. for (let i = 0; i <params.dataTableList.length ; i++) {
  339. params.dataTableList[i].propertiesItemNo= params.dataTableList[i].itemNo
  340. params.dataTableList[i].itemNo=999
  341. }
  342. deleteSubPropertiesValueForAlone(params.dataTableList).then(({data})=>{
  343. if (data && data.code === 0){
  344. this.$message.success(data.msg);
  345. this.getProperties(params)
  346. }else {
  347. this.$message.warning(data.msg);
  348. }
  349. }).catch((error)=>{
  350. this.$message.error(error)
  351. })
  352. },
  353. searchAttributeList(data){
  354. let params= JSON.parse(JSON.stringify(data))
  355. params.site=this.$store.state.user.site;
  356. params.list = this.dataList;
  357. if (!this.attributeSaveDialog){
  358. this.searchDataList = [];
  359. }
  360. let inData={
  361. site: this.searchData.site,
  362. partNo: this.searchData.partNo,
  363. codeNo: this.searchData.codeNo,
  364. functionType: this.searchData.functionType
  365. }
  366. searchPropertiesItemList(inData).then(({data}) => {
  367. if (data && data.code === 0){
  368. this.searchDataList = data.rows;
  369. }else {
  370. this.$message.warning(data.msg)
  371. }
  372. }).catch((error)=>{
  373. this.$message.error(error)
  374. })
  375. },
  376. },
  377. created() {
  378. // this.getProperties();
  379. },
  380. }
  381. </script>
  382. <style scoped>
  383. .el-input-number /deep/ .el-input__inner {
  384. text-align: right;
  385. padding-right: 5px !important;
  386. }
  387. /deep/ .el-input .el-input--medium{
  388. line-height: 20px;
  389. }
  390. /deep/ .el-input-number .el-input--medium{
  391. line-height: 20px;
  392. }
  393. </style>