|
@@ -1,668 +0,0 @@
|
|
|
-<script setup>
|
|
|
-
|
|
|
-import {getPermissionList} from '@/api/crm'
|
|
|
-import html2canvas from "html2canvas";
|
|
|
-
|
|
|
- const props=defineProps({
|
|
|
- visible:{
|
|
|
- type:Boolean,
|
|
|
- default:false
|
|
|
- },
|
|
|
- service:{
|
|
|
- type:Object,
|
|
|
- require:true
|
|
|
- },
|
|
|
- currentService:{
|
|
|
- type:Object,
|
|
|
- default:()=>{}
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const headTitleForm=ref(null)
|
|
|
-
|
|
|
- const params=reactive({
|
|
|
- tableHeadData:[],
|
|
|
- tableData:[],
|
|
|
- showRightClickMenu:false,//显示右键菜单
|
|
|
- rightClickCon: [
|
|
|
- { type: "selectRow", name: "选择该行" },
|
|
|
- { type: "insertColumn", name: "插入一列" },
|
|
|
- { type: "insertRow", name: "插入一行" },
|
|
|
- { type: "deleteColumn", name: "删除该列" },
|
|
|
- { type: "deleteRow", name: "删除该行" },
|
|
|
- ], //右键菜单内容
|
|
|
- showInputHead: false, //显示填写表头
|
|
|
- form: {
|
|
|
- title: "",
|
|
|
- }, //插入一列填写的表头数据
|
|
|
- tableSelectList: {
|
|
|
- 商品复盘: [
|
|
|
- { id: 2, name: "能化专栏《化里化外》", select: false },
|
|
|
- { id: 4, name: "黑色专栏《知白守黑》", select: false },
|
|
|
- { id: 5, name: "有色专栏《有声有色》", select: false },
|
|
|
- // { id: 1, name: "《每日宏观商品复盘》", select: false },
|
|
|
- { id: 3, name: "《股债日评》", select: false },
|
|
|
- ],
|
|
|
- 深度月报:[
|
|
|
- { id: 6, name: "宏观经济", select: false },
|
|
|
- { id: 7, name: "草根调研", select: false },
|
|
|
- // { id: 8, name: "PVC月报", select: false },
|
|
|
- ]
|
|
|
- }, //表格中自带选择的数据
|
|
|
- tableSelectCheck: {
|
|
|
- 商品复盘: [],
|
|
|
- }, //表格中自带选择的数据选中项
|
|
|
- selectRowIndex:'',
|
|
|
- selectIndex:{
|
|
|
- rindex: 0, //行序号
|
|
|
- cindex: 0, //列序号
|
|
|
- },
|
|
|
- position: {
|
|
|
- top: 0,
|
|
|
- left: 0,
|
|
|
- }, //鼠标右击时的位置
|
|
|
- })
|
|
|
-
|
|
|
- const varietyDia=reactive({
|
|
|
- dialogShow:false,
|
|
|
- varietyList:[],
|
|
|
- // 选中的Id
|
|
|
- chart_permission_ids:''
|
|
|
- })
|
|
|
- const emits=defineEmits(['update:visible','selectFinish'])
|
|
|
-
|
|
|
- watch(()=>props.service,(newValue)=>{
|
|
|
- // console.log(newValue,'value---');
|
|
|
- if(newValue) initData()
|
|
|
- },{deep:true})
|
|
|
- watch(()=>params.selectRowIndex,(newValue)=>{
|
|
|
- if (newValue === null) {
|
|
|
- varietyDia.varietyList.forEach((item) => {
|
|
|
- item.check_list = [];
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- watch(()=>props.currentService,(newVal)=>{
|
|
|
- // console.log(newVal,'newVal------------------');
|
|
|
- if (newVal.service_template_id) {
|
|
|
- if (props.service.service_template_id === newVal.service_template_id) {
|
|
|
- props.service.Value = newVal.Value;
|
|
|
- // 表格数据 newVal 更新的数据
|
|
|
- // 更新表头 props.service.detail[0]
|
|
|
- let arr=[newVal.tableHeadData,...newVal.tableData].map((item)=>{
|
|
|
- let obj={}
|
|
|
- item.forEach((item2,index2)=>{
|
|
|
- let key=`col_${index2+1}`
|
|
|
- obj={...obj,[key]:JSON.stringify(item2)}
|
|
|
- })
|
|
|
- return obj
|
|
|
- })
|
|
|
- props.service.detail=arr
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-// --------------method
|
|
|
-// 获取合同种类接口
|
|
|
-const getPermissionListFun=()=>{
|
|
|
- getPermissionList().then(res=>{
|
|
|
- let arr = res.data.List || []
|
|
|
- arr.forEach((item) => {
|
|
|
- item.check_list = [];
|
|
|
- item.checked = false;
|
|
|
- item.indeterminate = false;
|
|
|
- });
|
|
|
- varietyDia.varietyList=arr
|
|
|
- })
|
|
|
-}
|
|
|
-// 初始化表格数据
|
|
|
-const initData=()=>{
|
|
|
- if (!props.service.detail) return;
|
|
|
- // console.log(props.service.detail);
|
|
|
- let temarr = props.service.detail.map((rowItem) => {
|
|
|
- let rowArr = [];
|
|
|
- for (let key in rowItem) {
|
|
|
- if (key.substr(0, 3) === "col" && rowItem[key] !== "") {
|
|
|
- rowArr.push(JSON.parse(rowItem[key]));
|
|
|
- }
|
|
|
- }
|
|
|
- return rowArr;
|
|
|
- });
|
|
|
- params.tableHeadData = temarr[0];
|
|
|
- params.tableData = temarr.slice(1);
|
|
|
- // 回显表格内部选择的
|
|
|
- params.tableData.forEach((item) => {
|
|
|
- item.forEach((e) => {
|
|
|
- if (e.Type === "select") {
|
|
|
- let key = e.Value;
|
|
|
- item.forEach((e2) => {
|
|
|
- if (e2.HeadName === "品种") {
|
|
|
- if(e2.Value){
|
|
|
- params.tableSelectCheck[key] = e2.ValueId;
|
|
|
- }else{
|
|
|
- params.tableSelectCheck[key] = [];
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-// 左键选择行
|
|
|
-const handleSelectRow=(rindex,data)=> {
|
|
|
- // 如果选择的行存在 选项数据则不允许选择 或者 该行不可选择 即RowDisable=true
|
|
|
- if(data.HeadName!='品种') return
|
|
|
- let tag = false;
|
|
|
- params.tableData[rindex].forEach((item) => {
|
|
|
- if (item.Type === "select"||item.RowDisable) {
|
|
|
- tag = true;
|
|
|
- }
|
|
|
- });
|
|
|
- if (tag) return;
|
|
|
- params.selectRowIndex = rindex;
|
|
|
- formatOptionList();
|
|
|
- varietyDia.dialogShow=true
|
|
|
-}
|
|
|
-
|
|
|
-//每次选中一行时格式化顶部选择数据
|
|
|
-const formatOptionList=()=>{
|
|
|
- let valueId = [];
|
|
|
- params.tableData[params.selectRowIndex].forEach((item) => {
|
|
|
- if (item.HeadName === "品种") {
|
|
|
- valueId = item.ValueId;
|
|
|
- }
|
|
|
- });
|
|
|
- varietyDia.varietyList.forEach((item) => {
|
|
|
- item.check_list = [];
|
|
|
- item.items.forEach((e) => {
|
|
|
- let flag = valueId.indexOf(e.chart_permission_id);
|
|
|
- if (flag != -1) {
|
|
|
- item.check_list.push(e.chart_permission_id);
|
|
|
- }
|
|
|
- });
|
|
|
- if (item.check_list.length === item.items.length) {
|
|
|
- item.checked = true;
|
|
|
- } else {
|
|
|
- item.checked = false;
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-//鼠标右键
|
|
|
-const rightClick=(rindex, cindex, event)=>{
|
|
|
- params.selectIndex.rindex = Number(rindex);
|
|
|
- params.selectIndex.cindex = Number(cindex);
|
|
|
- formatRightClickCon(rindex, cindex);
|
|
|
- params.showRightClickMenu = true;
|
|
|
- params.position.top = event.clientY + "px";
|
|
|
- params.position.left = event.clientX + "px";
|
|
|
-}
|
|
|
-//格式化鼠标右击显示内容
|
|
|
-const formatRightClickCon=(rindex, cindex)=>{
|
|
|
- let arr = [
|
|
|
- { type: "insertColumn", name: "向后插入一列", show: true },
|
|
|
- { type: "insertRow", name: "向后插入一行", show: true },
|
|
|
- { type: "deleteColumn", name: "删除该列", show: true },
|
|
|
- { type: "deleteRow", name: "删除该行", show: true },
|
|
|
- ];
|
|
|
-
|
|
|
- // 品种一列不允许删除
|
|
|
- if (params.tableHeadData[cindex].Tag === "品种"||params.tableHeadData[cindex].Tag === "FICC小套餐服务内容") {
|
|
|
- arr[2].show = false;
|
|
|
- }
|
|
|
- //删除列 不能少于两列
|
|
|
- if (params.tableHeadData.length <= 2) {
|
|
|
- arr[2].show = false;
|
|
|
- }
|
|
|
-
|
|
|
- //删除行 不能少于两行
|
|
|
- if (params.tableData.length <= 2) {
|
|
|
- arr[3].show = false;
|
|
|
- }
|
|
|
-
|
|
|
- // 商品复盘、周报、双周报、数据点评、月报必须有一个存在
|
|
|
- let temarr=[]
|
|
|
- params.tableData.forEach(item=>{
|
|
|
- item.forEach(item2=>{
|
|
|
- if(item2.HeadName==='FICC小套餐服务内容'){
|
|
|
- if(item2.Value==='数据点评'||
|
|
|
- item2.Value==='FICC周报'||
|
|
|
- item2.Value==='商品双周报+线上电话会讨论会<br/>(由弘则的研究员主持线上讨论)'){
|
|
|
- temarr.push(item2.Value)
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- if(temarr.length<2){
|
|
|
- params.tableData[params.selectIndex.rindex].forEach(item=>{
|
|
|
- if(item.Value==='数据点评'||
|
|
|
- item.Value==='FICC周报'||
|
|
|
- item.Value==='商品双周报+线上电话会讨论会<br/>(由弘则的研究员主持线上讨论)'){
|
|
|
- arr[3].show = false;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- //新增列 不能超过6列
|
|
|
- if (params.tableHeadData.length >= 6) {
|
|
|
- arr[0].show = false;
|
|
|
- }
|
|
|
-
|
|
|
- params.rightClickCon = arr.filter((item) => {
|
|
|
- return item.show;
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 点击 新增/删除 行/列 选择该行
|
|
|
-const handleUpdateTable=(type)=>{
|
|
|
- //删除行
|
|
|
- if (type === "deleteRow") {
|
|
|
- params.selectRowIndex = null;
|
|
|
- params.tableData.splice(params.selectIndex.rindex, 1);
|
|
|
- }
|
|
|
-
|
|
|
- //新增行
|
|
|
- if (type === "insertRow") {
|
|
|
- params.selectRowIndex = null;
|
|
|
- let arr = params.tableHeadData.map((item) => {
|
|
|
- let obj = { CanEdit: true, Type: "text", Value: "", ValueId: [], HeadName: item.Tag,RowDisable:false,RowName:''};
|
|
|
- if (item.Tag === "品种") {
|
|
|
- obj.CanEdit = false;
|
|
|
- }
|
|
|
- return obj;
|
|
|
- });
|
|
|
-
|
|
|
- params.tableData.splice(params.selectIndex.rindex + 1, 0, arr);
|
|
|
- }
|
|
|
-
|
|
|
- //删除列
|
|
|
- if (type === "deleteColumn") {
|
|
|
- params.selectRowIndex = null;
|
|
|
- params.tableHeadData.splice(params.selectIndex.cindex, 1);
|
|
|
- params.tableData = params.tableData.map((item) => {
|
|
|
- item.splice(params.selectIndex.cindex, 1);
|
|
|
- return item;
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- //新增列
|
|
|
- if (type === "insertColumn") {
|
|
|
- params.selectRowIndex = null;
|
|
|
- params.showInputHead = true;
|
|
|
- }
|
|
|
-
|
|
|
- params.showRightClickMenu = false;
|
|
|
-}
|
|
|
-
|
|
|
-//点击确定新增表头内容
|
|
|
-const handleConfirmHead=()=>{
|
|
|
- headTitleForm.value.validate((valid) => {
|
|
|
- if (!valid) return;
|
|
|
- params.tableHeadData.splice(params.selectIndex.cindex + 1, 0, { CanEdit: false, Type: "text", Value: params.form.title, Tag: params.form.title });
|
|
|
- params.tableData = params.tableData.map((item) => {
|
|
|
- item.splice(params.selectIndex.cindex + 1, 0, { CanEdit: true, Type: "text", Value: "", HeadName: params.form.title,RowDisable:false,RowName:'' });
|
|
|
- return item;
|
|
|
- });
|
|
|
- params.showInputHead = false;
|
|
|
- params.form.title = "";
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-//点击取消填写新增列头弹窗
|
|
|
-const handleCancelHead=()=>{
|
|
|
- headTitleForm.value.resetFields();
|
|
|
- params.showInputHead = false;
|
|
|
-}
|
|
|
-
|
|
|
-//点击表格中选项数据
|
|
|
-const handleTableSelectChange=(title, rindex)=>{
|
|
|
- let arr = params.tableSelectCheck[title];
|
|
|
- let arr2 = [];
|
|
|
- params.tableSelectList[title].forEach((item) => {
|
|
|
- arr.forEach((e) => {
|
|
|
- if (e == item.id) {
|
|
|
- arr2.push(item.name);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- params.tableData[rindex].forEach((item) => {
|
|
|
- if (item.HeadName === "品种") {
|
|
|
- item.Value = arr2.join("、");
|
|
|
- item.ValueId = arr;
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-const varietyCheckedChange=(e)=>{
|
|
|
- e.checked = e.check_list.length == e.items.length
|
|
|
- e.indeterminate = e.check_list.length>0 && e.check_list.length < e.items.length
|
|
|
-}
|
|
|
-
|
|
|
-const varietyAllChecked=(e)=>{
|
|
|
- let arr = e.items.map((item) => {
|
|
|
- return item.chart_permission_id;
|
|
|
- });
|
|
|
- e.check_list = e.checked ? arr : [];
|
|
|
- e.indeterminate = false;
|
|
|
- // 宏观经济默认勾选
|
|
|
- if(e.classify_name==='宏观经济'){
|
|
|
- e.check_list.push(1)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-const varietiesSelect=()=>{
|
|
|
- if (params.selectRowIndex === null) return;
|
|
|
- let arr=[]
|
|
|
- let arrId=[]
|
|
|
- let count = 0
|
|
|
- varietyDia.varietyList.forEach((item) => {
|
|
|
- if (item.checked) {
|
|
|
- count++;
|
|
|
- }
|
|
|
- });
|
|
|
- // 全选
|
|
|
- if(count===varietyDia.varietyList.length){
|
|
|
- arr = ["全品种"];
|
|
|
- varietyDia.varietyList.forEach((item) => {
|
|
|
- arrId = [...arrId, ...item.check_list];
|
|
|
- });
|
|
|
- }else{
|
|
|
- varietyDia.varietyList.forEach((item) => {
|
|
|
- item.items.forEach((item2) => {
|
|
|
- let flag = item.check_list.indexOf(item2.chart_permission_id);
|
|
|
- if (flag != -1) {
|
|
|
- arr.push(item2.permission_name);
|
|
|
- arrId.push(item2.chart_permission_id);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 找出和该行关联的行 同时修改品种栏数据
|
|
|
- let rowIndexarr=[]
|
|
|
- if(!params.tableData[params.selectRowIndex][0].RowName){
|
|
|
- rowIndexarr.push(params.selectRowIndex)
|
|
|
- }else{
|
|
|
- params.tableData.forEach((item,index)=>{
|
|
|
- if(item[0].RowName==params.tableData[params.selectRowIndex][0].RowName){
|
|
|
- rowIndexarr.push(index)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- rowIndexarr.forEach(index=>{
|
|
|
- params.tableData[index].forEach((item) => {
|
|
|
- if (item.HeadName === "品种") {
|
|
|
- item.Value = arr.join("、");
|
|
|
- item.ValueId = arrId;
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- let idArr = []
|
|
|
- varietyDia.varietyList.map(item=>{
|
|
|
- idArr=[...idArr,...item.check_list]
|
|
|
- })
|
|
|
- varietyDia.chart_permission_ids=idArr.join(',')
|
|
|
- varietyDia.dialogShow=false
|
|
|
- params.selectRowIndex=null
|
|
|
-}
|
|
|
-
|
|
|
-const varietiesCancel=()=>{
|
|
|
- varietyDia.dialogShow=false
|
|
|
- params.selectRowIndex=null
|
|
|
-}
|
|
|
-
|
|
|
-const validateData=()=>{
|
|
|
- //判断品种列是否有值
|
|
|
- let arr = [];
|
|
|
- params.tableData.forEach((item) => {
|
|
|
- item.forEach((item2) => {
|
|
|
- if (item2.HeadName === "品种") {
|
|
|
- arr.push(...item2.ValueId);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- // 判断行是否有值
|
|
|
- let arr2 = [];
|
|
|
- params.tableData.forEach((item, index) => {
|
|
|
- let arr = item.filter((item2) => {
|
|
|
- if (!item2.Value) return item2;
|
|
|
- });
|
|
|
- if (arr.length === params.tableHeadData.length) {
|
|
|
- arr2.push(index);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 商品复盘、周报、双周报、数据点评、月报 品种必须有一个选择了
|
|
|
- let arr3=[]
|
|
|
- params.tableData.forEach(item=>{
|
|
|
- item.forEach(item2=>{
|
|
|
- if(item2.Value==='数据点评'||
|
|
|
- item2.Value==='FICC周报'||
|
|
|
- item2.Value==='商品双周报+线上电话会讨论会<br/>(由弘则的研究员主持线上讨论)'){
|
|
|
- item.forEach(item3=>{
|
|
|
- if (item3.HeadName === "品种") {
|
|
|
- arr3.push(...item3.ValueId);
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- if (!arr.length) {
|
|
|
- ElMessage.warning("至少选择一个品种");
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- if (arr2.length) {
|
|
|
- ElMessage.warning("行内至少填一项");
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- if(!arr3.length){
|
|
|
- ElMessage.warning("周报、双周报、数据点评至少选择一个品种");
|
|
|
- return false;
|
|
|
- }
|
|
|
- // console.log(arr,arr2,arr3);
|
|
|
- return true;
|
|
|
-}
|
|
|
-
|
|
|
-const submit=()=>{
|
|
|
- let flag = validateData();
|
|
|
- if (!flag) return;
|
|
|
- // console.log(params.tableData);
|
|
|
- // 生成表格图片
|
|
|
- html2canvas(document.getElementById("table-png"), {
|
|
|
- backgroundColor: "#ffffff",
|
|
|
- useCORS: true, // 允许图片跨域
|
|
|
- allowTaint: true, // 在渲染前测试图片
|
|
|
- imageTimeout: 0, // 加载延时
|
|
|
- scale:3,
|
|
|
- }).then((res) => {
|
|
|
- let img = res.toDataURL("image/png");
|
|
|
- emits("selectFinish", {
|
|
|
- Value: img,
|
|
|
- chart_permission_ids:varietyDia.chart_permission_ids||'1',
|
|
|
- service_template_id: props.service.service_template_id,
|
|
|
- tableData: params.tableData,
|
|
|
- tableHeadData: params.tableHeadData,
|
|
|
- });
|
|
|
- serviceClose();
|
|
|
- });
|
|
|
-}
|
|
|
-const closeDia=()=>{
|
|
|
- serviceClose()
|
|
|
- initData()
|
|
|
-}
|
|
|
-
|
|
|
-const serviceClose=()=>{
|
|
|
- params.showRightClickMenu = false;
|
|
|
- params.selectRowIndex = null;
|
|
|
- emits('update:visible',false)
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// ---------------created
|
|
|
- getPermissionListFun()
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div id="service-variety-container">
|
|
|
- <el-dialog title="选择品种" :model-value="props.visible" top="5vh"
|
|
|
- @close="serviceClose" :close-on-click-modal="false" width="900" >
|
|
|
- <div style="max-height: 66vh; overflow-y: auto; padding: 10px 0">
|
|
|
- <table id="table" ref="table" class="table-wrap" @click="params.showRightClickMenu = false">
|
|
|
- <thead>
|
|
|
- <tr style="background: #f0f2f5">
|
|
|
- <th class="table-item" v-for="item in params.tableHeadData" :key="item.Value">{{ item.Value }}</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
-
|
|
|
- <tbody>
|
|
|
- <tr v-for="(row, rindex) in params.tableData" :key="rindex" :class="rindex === params.selectRowIndex ? 'row-dark' : null">
|
|
|
- <td
|
|
|
- class="table-item"
|
|
|
- v-for="(item, cindex) in row"
|
|
|
- :key="item"
|
|
|
- @click="handleSelectRow(rindex,item)"
|
|
|
- @contextmenu.prevent="rightClick(rindex, cindex, $event)"
|
|
|
- :data-rindex="rindex"
|
|
|
- :data-cindex="cindex"
|
|
|
- >
|
|
|
- <div v-if="item.Type === 'text'">
|
|
|
- <el-icon v-if="item.HeadName=='品种'&&!item.RowDisable" color="var(--themeColor)"
|
|
|
- size="20" style="cursor: pointer;" class="choose-icon" ><EditPen /></el-icon>
|
|
|
- <span
|
|
|
- v-if="!item.CanEdit"
|
|
|
- v-html="item.Value"
|
|
|
- :style="{paddingLeft:item.HeadName=='品种'&&!item.RowDisable?'25px':null,display:'inline-block'}"
|
|
|
- ></span>
|
|
|
- <el-input v-else type="textarea" placeholder="请输入" v-model="item.Value"></el-input>
|
|
|
- </div>
|
|
|
- <div v-if="item.Type === 'select'">
|
|
|
- <div style="margin-bottom: 10px;font-size:15px">{{ item.Value }}</div>
|
|
|
- <div style="text-align: left">
|
|
|
- <el-checkbox-group v-model="params.tableSelectCheck[item.Value]">
|
|
|
- <el-checkbox style="font-size:14px" :label="opt.id" v-for="opt in params.tableSelectList[item.Value]" :key="opt.id" @change="handleTableSelectChange(item.Value, rindex, cindex)">{{ opt.name }}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <el-button type="primary" @click="submit" style="color: white;">保存</el-button>
|
|
|
- <el-button @click="closeDia">取消</el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <!-- 右键选项弹框 -->
|
|
|
- <div class="right-click-wrap" :style="params.position" v-show="params.showRightClickMenu">
|
|
|
- <div @click="handleUpdateTable(item.type)" v-for="item in params.rightClickCon" :key="item.type">{{ item.name }}</div>
|
|
|
- </div>
|
|
|
- <!-- 新增列填写表头弹窗 -->
|
|
|
- <el-dialog v-model="params.showInputHead" width="560px" top="20vh" title="添加列">
|
|
|
- <el-form :model="params.form" ref="headTitleForm" label-width="100px">
|
|
|
- <el-form-item label="表格名称" prop="title" :rules="{ required: true, message: '请填写名称', trigger: 'blur' }">
|
|
|
- <el-input v-model="params.form.title"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div style="text-align: center; margin-top: 70px; margin-bottom: 30px">
|
|
|
- <el-button type="primary" @click="handleConfirmHead" style="height: 36px;width: 120px;">保存</el-button>
|
|
|
- <el-button type="primary" plain @click="handleCancelHead" style="height: 36px;width: 120px;">取消</el-button>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </el-dialog>
|
|
|
- <!-- 生成表格图片dom -->
|
|
|
- <table id="table-png" class="table-wrap">
|
|
|
- <thead>
|
|
|
- <tr style="background: #f0f2f5">
|
|
|
- <th class="table-item" v-for="item in params.tableHeadData" :key="item.Value" style="color: #333;font-size:15px">{{ item.Value }}</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(row, rindex) in params.tableData" :key="rindex">
|
|
|
- <td class="table-item" v-for="item in row" :key="item" style="max-width: 300px">
|
|
|
- <div v-html="item.Value" style="color: #333;font-size:14px"></div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <!-- 选择具体品种弹窗 -->
|
|
|
- <el-dialog title="选择品种" v-model="varietyDia.dialogShow" :close-on-click-modal="false" width="700" >
|
|
|
- <div style="padding: 20px 30px;border: dashed 1px #aab4cc;border-radius: 4px;">
|
|
|
- <div v-for="item in varietyDia.varietyList" :key="item.classify_name" style="display: flex;margin-bottom: 20px;">
|
|
|
- <el-checkbox v-model="item.checked" :disabled="params.selectRowIndex === null"
|
|
|
- :indeterminate="item.check_list.length>0 && item.check_list.length < item.items.length" @change="varietyAllChecked(item)">
|
|
|
- {{item.classify_name}}:</el-checkbox>
|
|
|
- <el-checkbox-group v-model="item.check_list" @change="varietyCheckedChange(item)" :disabled="params.selectRowIndex === null">
|
|
|
- <el-checkbox :label="it.chart_permission_id" v-for="it in item.items" :key="it.chart_permission_id"
|
|
|
- :disabled="it.chart_permission_id=='1'">{{it.permission_name}}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <el-button type="primary" @click="varietiesSelect" style="color: white;">保存</el-button>
|
|
|
- <el-button @click="varietiesCancel">取消</el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.table-wrap {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- border-top: 1px solid #ebeef5;
|
|
|
- border-left: 1px solid #ebeef5;
|
|
|
- .row-dark {
|
|
|
- background-color:#ebeef5;
|
|
|
- }
|
|
|
- .table-item {
|
|
|
- padding: 20px 10px;
|
|
|
- border-right: 1px solid #ebeef5;
|
|
|
- border-bottom: 1px solid #ebeef5;
|
|
|
- min-width: 160px;
|
|
|
- position: relative;
|
|
|
- .table-item-mask {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- z-index: 1000;
|
|
|
- }
|
|
|
- .choose-icon{
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 10px;
|
|
|
- transform:translateY(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.right-click-wrap {
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 10px 0;
|
|
|
- position: fixed;
|
|
|
- z-index: 5000;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
- line-height: 2;
|
|
|
- div {
|
|
|
- cursor: pointer;
|
|
|
- padding: 0 20px;
|
|
|
- &:hover {
|
|
|
- background-color: #ebeef5;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-#table-png {
|
|
|
- position: absolute;
|
|
|
- z-index: -10;
|
|
|
- top: -100%;
|
|
|
- left: 0;
|
|
|
- width: 1000px;
|
|
|
-}
|
|
|
-</style>
|